Click handlers for edit and save buttons

Question

I have the following code from a JavaScript file:

$("body").on("click",".edit",function(){
    var list=$(this).closest("a").data("list");
    var seira=$(this).closest("a").data("order");
    //alert(navbar_edit[list][seira]);
    var edit=navbar_edit[list][seira];
    navbar_edit[list][seira]=prompt("Change property",edit);
    exportLists();

});
$("body").on("click",".edit-save",function(){
    var property=$(this).closest("a").text();
    property=property.substring(0,property.length-4);
    alert(property);
    var list=$(this).closest(".list-group").attr("id");
    list=list.substring(list.length-1);
    navbar_edit[list].push(property);
    exportLists();
});

As you can see, I use $("body") 3 times to execute 3 different actions. Is there any way to use it only once so I can reduce my code?

It's rather difficult to review just these two handlers in isolation without context. It would help if you also showed us a sample of the HTML and explained the goal that you are trying to achieve. Also, what does exportLists() do, and is it related to all this jQuery selection stuff? — 200_success
– 200_success, Commented May 20, 2015 at 16:43

hindmost · Accepted Answer · 2015-05-20 10:16:48Z

Like many jQuery methods, .on() returns jQuery object which you can use for chaining purpose.

Sidenote: You should take into account that prompt method may return null if the user cancel dialog. Therefore you have to check the returning value before assigning it to the target variable (navbar_edit[list][seira]).

So the code may look like this:

$("body").on("click",".edit",function(){
    var list=$(this).closest("a").data("list");
    var seira=$(this).closest("a").data("order");
    //alert(navbar_edit[list][seira]);
    var edit=navbar_edit[list][seira];
    var v=prompt("Change property",edit);
    if (v) navbar_edit[list][seira]=v;
    exportLists();

}).on("click",".edit-save",function(){
    var property=$(this).closest("a").text();
    property=property.substring(0,property.length-4);
    alert(property);
    var list=$(this).closest(".list-group").attr("id");
    list=list.substring(list.length-1);
    navbar_edit[list].push(property);
    exportLists();
});

Andreas Louv · Accepted Answer · 2015-05-20 15:39:45Z

A few notes:

Always use .slice over .substring (Yes .slice works on strings.), it will support negative selection af strings, eg "abc".slice(0, -1) // "ab"
Storing reused values / objects in variables cleans up the code a lot, eg:

var a = $(this).find('.element').attr('a');
var b = $(this).find('.element').attr('b');
// The above can be written as: 
var $element = $(this).find('.element');
var a = $element.attr('a');
var b = $element.attr('b');
// This is faster and is IMO easier to read.

Meaningful variable names, dont use names like seira when you are referring to an index in an array call it index or list_index etc. (I assume its meaningful in another language but IMO all code should be written in english with english comments, and english variable names.)

Code:

$(document.body).on('click', '.edit', function() {
    var $a = $(this).closest('a');
    var list_id = $a.data('list');
    var index = $a.data('order');

    var current_value = navbar_edit[list][index];
    var new_value = prompt('Change Property', current_value);

    navbar_edit[list][index] = new_value;

    exportLists();
});
$(document.body).on('click', '.edit-save', function() {
    var $a = $(this).closest('a');
    var $listGroup = $(this).closest('.list-group');

    var value = $a.text().slice(0, -4);
    var list_id = $listGroup.attr('id').slice(0, -1); // remove last char

    navbar_edit[list_id].push(value);

    exportLists();
});

All-English code makes more sense. However, if you are going to use Greek, why not write σειρά? That's a valid JavaScript identifier. — 200_success
– 200_success, Commented May 20, 2015 at 16:48

Stack Exchange Network

Click handlers for edit and save buttons

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Click handlers for edit and save buttons

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions