后期绑定onclick事件

以下是我的javscript的一部分（使用jquery）。

list = ['a', 'b', 'c']; for(var i = 0 ; i< list.length ; i++) { $("click here"). click(function(){ foo(list[i]); }). appendTo('#sometag'); } function foo(val) { console.log(val); } 

总是打印c，无论你点击哪个标签。 如何打印正确值???
它似乎正在使用i = 3的最后一个值，因此总是评估oc

Answer 1

在触发事件处理程序之前迭代完成时你需要一个闭包新作用域，所以当单击发生时，循环已经完成并且i是它设置的最后一个值，新作用域保持i本地值为范围

 list = ['a', 'b', 'c']; for(var i=0; iclick here").click(function(){ foo(list[j]); }).appendTo('#sometag'); }(i)); } function foo(val) { console.log(val); } 

另一种选择是添加更多jQuery

 list = ['a', 'b', 'c']; $.each(list, function(index, item) { $("", {text : 'click here', on : { click : function() { foo(item); } } }).appendTo('#sometag'); }); function foo(val) { console.log(val); } 

Answer 2

在执行函数时创建一个闭包以保留特定迭代的i的值，而没有闭包i仍然在范围内导致所有创建的函数最终在最后一次迭代时具有值：

 var list = ['a', 'b', 'c']; for(var i = 0 ; i< list.length ; i++) { var func = createFoo(list[i]); $("click here"). click(func). appendTo('#sometag'); } function createFoo(value){ return function(){ foo(value); }; } function foo(val) { console.log(val); } 

JS小提琴： http ： //jsfiddle.net/5dUgw/

另请注意，您需要将int更改为var因为这是JS。