Question

Ok, below is my code:

for (var mycounter = currentcanvas.getObjects().length; mycounter > 0; mycounter--) {
    var id = currentcanvas.getObjects().length - mycounter;
    alert(id);
    $("#frontlayers").prepend('<li id="' + id + '" class="layers"></span> Layer ' + (id + 1) + ': ' + "  " + ' </li>');
    $("#" + id).click(function(e) {
        alert(id);
    });
}​

This correctly adds the li with the text “Layer 1” and “Layer 2”, but when I click on them the alert is always 2 instead of 0 and 1 accordingly.
does anyone know why this is happening? sorry I’m relatively new to jQuery.

Answer 1

This is a good use for $.each because using a handler function avoids the scope issue you have with the closure on the variable i:

$.each(currentcanvas.getObjects(), function(i, v) {
     var id = i;  // nb: numeric ID fields only allowed in HTML5
     $('<li>', {
         id: id,
         'class': 'layers',
         text: 'Layer ' + (id + 1) + ': '
     }).appendTo('#frontlayers').on('click', function(e) {
         alert(id);
     });
});

That said, since your ID is stored on the clicked element anyway, you could have just used that directly – this.id