循环中的JQuery绑定[重复]

Question

我有一个循环

for (i = 0; i < 10; i++)
{
    outPut.innerHTML += "<div id='file" + i + "'>" + i + "</div>";
    $('#file' + i).on('click', function(event) {
        alert('User clicked on ' + i);
    }).css('cursor', 'pointer');
}

并且只有最后一个元素会附加事件。有什么问题？

在这里查看测试http://jsfiddle.net/haF7Y/

Answer 1

这就是您所缺少的 - 事件侦听器本质上是异步的！因此，在执行此类任务时，请始终在循环内使用闭包函数！见下文-

for (i = 0; i <10; i++){
  (function(i){
    outPut.innerHTML +="<div id='file"+ i + "'>" + i+ "</div>";
    $('#file' + i).on('click', function(event) {
      alert('User clicked on ' + i);
    }).css('cursor', 'pointer');
  }(i))
}

Answer 2

从for loop中移除点击事件。

$(document).on('click', '[id^=file]', function(e){
    alert('user clicked on '+ this.id.split('file')[1]);
});

Answer 3

使用这样的 jquery 对象（并创建一个闭包）

var jOutPut = $('div:first');

var create = function(i) {
    var j = $('<div/>')
        .attr('id', 'file' + i)
        .css('cursor', 'pointer')
        .html(i)
        .click(function(event){
            alert('User clicked on ' + i);
        });

    jOutPut.append(j);
}

for(i=0;i<10;i++) {
    create(i);
}

Answer 4

你的代码应该这样写：

for (i = 0; i < 10; i++)
{
    var newEl = $("<div class='file' data-index='"+i+"'>" + i + "</div>").css('cursor', 'pointer');
    outPut.append(newEl);
}

$('.file').click(function(event) {
        alert('User clicked on ' + $(this).attr('data-index'));
});

这是一个证明它有效的小提琴：http://jsfiddle.net/qX8RQ/