问题描述:有一个参数集合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); }

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

js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件的更多相关文章

  1. JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...

  2. 【读书笔记】iOS-storyBoard-为一个按钮添加一个点击事件

    按照故事板的用语,应用中的一个界面屏幕被称作一个”场景(Scene)",以后添加额外的场景时,停靠区中将有另一个部分. 一,新建立一个工程,如图所示. 二,选中Main.storyboard ...

  3. JS闭包导致循环给按钮添加事件时总是执行最后一个

    加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...

  4. js循环生成多个easyui datagrid数据网格时,初始化表格

    $.each( content, function(i, item){ var info_tpl = "";var result_tpl = "";var pr ...

  5. js闭包for循环总是只执行最后一个值得解决方法

    <style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;curso ...

  6. Extjs grid column里添加button等html标签,并增加点击事件

    Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button 如何能在column里增加html标签,并给button添加事件呢? 1. ...

  7. JS点击事件的重叠处理(多个点击事件出现冲突)

    最近开发遇见了一个这个样的情况,一个button在一个div中,点击buton是一个事件,点击大的div也是一个事件,但是由于button在div中,点击button会把两个事件都执行了,但是我们想点 ...

  8. 动态生成的DOM做点击事件无效

    有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <b ...

  9. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

随机推荐

  1. openfeign使用踩坑记录

    1.报ClassNotFound com.netflix.config.CachedDynamicIntProperty问题,原因是spring-cloud-starter-openfeign的spr ...

  2. [资源] 桃宝上十几块买的C#教程网盘

    我粗略的看了下觉得挺好的,分享给大家 链接:https://pan.baidu.com/s/1iHuLUXde4_L7NB-Zw9JWNg 提取码:1314

  3. JavaScript学习总结9

    今天学习了表单提交,JQuery部分知识

  4. 新手小白入门C语言第五章:C存储类

    一 .存储类 在理解C的存储类之前,首先要搞懂的概念有:作用域.生存周期.连接属性 C中的存储类说明符实际上是上述属性的不同组合 作用域:一个C变量的作用域可以是 代码块作用域(在函数内部代码块中定义 ...

  5. 【深度学习 论文篇 02-1 】YOLOv1论文精读

    原论文链接:https://gitee.com/shaoxuxu/DeepLearning_PaperNotes/blob/master/YOLOv1.pdf 笔记版论文链接:https://gite ...

  6. Google kickstart 2022 Round A题解

    Speed Typing 题意概述 给出两个字符串I和P,问能否通过删除P中若干个字符得到I?如果能的话,需要删除字符的个数是多少? 数据规模 \[1≤|I|,|P|≤10^5 \] 双指针 设置两个 ...

  7. 关于Jupyter Notebook无法自动补全(Autocompletion),报错TypeError: __init__() got an unexpected keyword argument 'column' 的解决方案

    关于Jupyter Notebook无法自动补全(Autocompletion),报错TypeError: __init__() got an unexpected keyword argument ...

  8. kali 安装 docker

    添加密钥 信任 浙大更新源 curl -fsSL http://mirrors.zju.edu.cn/docker-ce/linux/debian/gpg | sudo apt-key add - t ...

  9. vue-core-video-player-基于vue.js的视频播放器组件

    一 介绍 一款基于 vue.js 的轻量级的视频播放器插件插件 个性化配置 i18n 服务端渲染 画中画模式 事件订阅 易于开发 移动端适配 1.1 官方文档 https://core-player. ...

  10. Linux-centos8实现私有CA和证书申请

    创建CA相关目录,centos8不存在这些目录,需手动建立 [root@centos8-liyj ~]#mkdir -pv /etc/pki/CA/{certs,cr1,newcerts,privat ...