js 循環生成元素，並為元素添加click事件，結果只執行最后一個點擊事件

問題描述：有一個參數集合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); }

有關閉包的知識請看： 阮一峰的網絡日志