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 loop删除点击事件。

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

Answer 2

使用像这样的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 3

这就是你所缺少的 - 事件监听器本质上是异步的！所以在执行这样的任务时总是在循环内部使用闭包函数！见下文 -

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 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/

循环中的JQuery绑定

4 个答案: