关于jquery：Javascript – 在循环中附加事件


Javascript — Attach events in loop

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
adding ‘click’ event listeners in loop

我做了一个demo.So让我们先看看HTML。

1
2
3
4
5
testA
testB    

showA
showB

我想将click事件绑定到Elements a。 当它点击时，alert相关的div。 (单击id="testA"，警告id="showA" ...)

我写了jQuery代码。

1
2
3
4
5
6
var arr = ["A","B"];    
  for(var i=0;i<arr.length;i++){
    $("#test"+arr[i]).click(function(){
      alert($("#show"+arr[i]).text())
    });
  }

但它不起作用。 我调试此代码并发现此代码alert($("#show"+arr[i]).text())

仅在我单击a元素时运行。 当我点击a。 变量i已经是3。

所以我该怎么做？

问题是，一旦执行了事件处理程序，i将达到其最终值并停留在arr.length。 您可以使用闭包在循环的每次迭代中捕获i的值：

1
2
3
4
5
6
7
8
var arr = ["A","B"];    
for(var i=0;i<arr.length;i++) {
    (function (i) {
        $("#test"+arr[i]).click(function(){
            alert($("#show"+arr[i]).text())
        });
    }(i));
}

这是一个有效的例子。

相关讨论

最简单/最干净的解决方案是使用forEach循环。

1
2
3
4
5
arr.forEach(function(val) {
  $("#test"+ val).click(function() {
    alert($("#show"+ val).text())
  });
});

如果您想要支持旧版浏览器，则可以在线使用多种填充剂。

编辑：由于你使用jQuery，你也可以使用$.each：

1
$.each(arr, function(idx, val) { ... });
相关讨论