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?

Answer 1

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();
});

Answer 2

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();
});