zoukankan      html  css  js  c++  java
  • 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); }
    复制代码

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

  • 相关阅读:
    VIJOS-P1340 拯救ice-cream(广搜+优先级队列)
    uva 11754 Code Feat
    uva11426 GCD Extreme(II)
    uvalive 4119 Always an Interger
    POJ 1442 Black Box 优先队列
    2014上海网络赛 HDU 5053 the Sum of Cube
    uvalive 4795 Paperweight
    uvalive 4589 Asteroids
    uvalive 4973 Ardenia
    DP——数字游戏
  • 原文地址:https://www.cnblogs.com/onesea/p/13213246.html
Copyright © 2011-2022 走看看