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); }

有关闭包的知识请看： 阮一峰的网络日志