問題描述:有一個參數集合data,for循環為每一個參數生成一個dom元素,並附加onclick事件。生成之后發現點擊事件里的參數全是data集合里的最后一個。
代碼如下:
var dom=$('#div_id');
for(var i=0;i<data.length;i++)
{
var children=document.createElement("div");
children.onclick=function(){
alert(data[i]);
}
dom.append(children);
}
原因:變量i的作用域為for循環內部;對於onclick=function(){}來說,它屬於父親作用域,對於異步監聽的onclick函數,聲明的時候並未執行函數體(即:未執行alert(data[i]))而是在點擊時觸發執行函數體,此時父親作用域的變量i已經變為data的長度,因此對於生成的元素的每個點擊事件來講,i 都是同一個值。
解決方法:采用JavaScript閉包。(function(){ return function(){ } })(data[i]);
var dom=$('#div_id');
for(var i=0;i<data.length;i++)
{
var children=document.createElement("div");
children.onclick=(function(param){
var childrenparam=param;
return function(){
alert(childrenparam);
}
})(data[i]);
dom.append(children); }
有關閉包的知識請看: 阮一峰的網絡日志

