Javascript 循环中的JQuery绑定

我有一个循环

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

（i=0；i<10；i++）的

{
outPut.innerHTML+=“”+i+“”；
$（“#文件”+i）.on（'click'，函数（事件）{
警报（'用户单击'+i'）；
}).css（“光标”、“指针”）；
}

只有最后一个元素附加了事件。有什么问题

---

请参阅此处的测试

从循环中删除单击事件

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

---

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

var jOutPut=$（'div:first'）；
var create=函数（i）{
变量j=$（''）
.attr（'id'，'file'+i）
.css（'光标'，'指针'）
.html（i）
。单击（功能（事件）{
警报（'用户单击'+i'）；
});
jOutPut.append（j）；
}
对于（i=0；i这是您的代码应该如何编写的：

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

（i=0；i<10；i++）的

{
var newEl=$（“+i+”）.css（'cursor'，'pointer'）；
outPut.append（newEl）；
}
$（'.file'）。单击（函数（事件）{
警报（'用户单击'+$（this）.attr（'数据索引'））；
});

这里有一个小提琴来展示它的工作原理：
这里是您缺少的东西-事件侦听器本质上是异步的！因此，在执行此类任务时，请始终在循环中使用闭包函数！请参见下文-

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

用于（i=0；i…或OMG，不要这样做…使用一个类和/或数据属性并绑定一次…为什么绑定做相同事情的不同函数！？如果你想知道为什么你被否决了，显然是因为缺乏研究。@Matt再试一次。。。sorry@Matt和@JanDvorak…
从不发布未经测试的代码
…现在！如果我发布未经测试的代码来演示一个算法，我会将其标记为：“类似的东西”，“这是解决方案的草图”…请注意，在修复某人的代码时，这将不起作用，以后调试总是一个好主意：-）修订，抱歉我错过了“I”.所有该死的反对票怎么回事？你应该感谢你的帮助。不确定
index（）
是最好的方法。在某些集合中建立索引可能会更好。否决票通常表示答案在事实上不正确或有害。您没有解决此问题。因此，事实上不正确。有多种方法可以显示索引，如果您想要更明确的索引，请使用“数据索引”或“数据-\ \”存储信息。
数据索引
具有创新性。+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))
}