How to append li using jQuery and using the id on the onclick method

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.

Your problem has the same root cause as the FAQ question here: stackoverflow.com/questions/750486/…. — pimvdb
– pimvdb, Commented Oct 30, 2012 at 23:42
cause you keep updating the value of id. maybe store the id somewhere else — nathan hayfield
– nathan hayfield, Commented Oct 30, 2012 at 23:42
Try alert(this.id) - within the click handler this will be the clicked element. The problem you're having with the variable id is that all of the click handlers you create refer to the same variable as per the question pimvdb linked to (which is not a jQuery issue). — nnnnnn
– nnnnnn, Commented Oct 30, 2012 at 23:43

Alnitak · Accepted Answer · 2012-10-31 00:44:57Z

4

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

edited Oct 31, 2012 at 0:44

answered Oct 30, 2012 at 23:50

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to append li using jQuery and using the id on the onclick method

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related