javascript - 如何使用 jQuery 附加 li 并在 onclick 方法上使用 id

Question

好的，下面是我的代码:

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

这正确地添加了带有文本“Layer 1”和“Layer 2”的 li，但是当我点击它们时，警报总是 2 而不是相应的 0 和 1。 有谁知道为什么会这样？抱歉，我对 jQuery 比较陌生。

Answer 1

这是 $.each 的一个很好的用途，因为使用处理函数可以避免变量 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);
     });
});

也就是说，由于您的 ID 无论如何都存储在被点击的元素上，您可以直接使用它 - this.id