How to generate event handlers with loop in Javascript?
本问题已经有最佳答案,请猛点这里访问。
例如,我有一个从AJAX响应生成的标签:
1 2 3 4 5 6 7 8 9 10 | b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 |
我需要通过循环为每个人分配onclick事件:
1 2 3 4 5 | for(i=1; i<11; i++) { document.getElementById("b"+i).onclick=function() { alert(i); } } |
这不起作用,它只分配onclick到最后一个标签并提醒"11"。 我怎样才能让它发挥作用? 我宁愿不使用jQuery。
所有处理程序都共享相同的
您需要将每个处理程序放入一个单独的函数中,该函数将
1 2 3 4 5 6 7 8 | function handleElement(i) { document.getElementById("b"+i).onclick=function() { alert(i); }; } for(i=1; i<11; i++) handleElement(i); |
关闭是你正在寻找的:
1 2 3 4 5 6 7 | for(i=1; i<11; i++) { (function(i) { document.getElementById("b"+i).onclick=function() { alert(i); }; })(i); } |
有两种方法可以在这个问题上使用闭包。 我们的想法是为事件处理程序使用的每次迭代创建一个带有"i"变量快照的作用域。
解决方案#1(凯文提到):
1 2 3 4 5 6 7 8 9 | for(i=1; i<11; i++) { (function(num) { document.getElementById("b"+num).addEventListener('click', function() { alert(num); }); })(i); } |
解决方案#2:
1 2 3 4 5 6 7 8 | for (i=1; i<11; i++) { document.getElementById("b"+i).addEventListener('click', (function(){ var num = i; return function() { alert(num); } })()); } |