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); }
有关闭包的知识请看:阮一峰的网络日志
js 循环生成元素,并为元素添加click事件,结果只执行最后一个点击事件的更多相关文章
- JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值
先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...
- 【读书笔记】iOS-storyBoard-为一个按钮添加一个点击事件
按照故事板的用语,应用中的一个界面屏幕被称作一个”场景(Scene)",以后添加额外的场景时,停靠区中将有另一个部分. 一,新建立一个工程,如图所示. 二,选中Main.storyboard ...
- JS闭包导致循环给按钮添加事件时总是执行最后一个
加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...
- js循环生成多个easyui datagrid数据网格时,初始化表格
$.each( content, function(i, item){ var info_tpl = "";var result_tpl = "";var pr ...
- js闭包for循环总是只执行最后一个值得解决方法
<style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;curso ...
- Extjs grid column里添加button等html标签,并增加点击事件
Extjs里有个actioncolumn,但actioncolumn只能添加一系列button,不能既有字又有button 如何能在column里增加html标签,并给button添加事件呢? 1. ...
- JS点击事件的重叠处理(多个点击事件出现冲突)
最近开发遇见了一个这个样的情况,一个button在一个div中,点击buton是一个事件,点击大的div也是一个事件,但是由于button在div中,点击button会把两个事件都执行了,但是我们想点 ...
- 动态生成的DOM做点击事件无效
有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <b ...
- Jquery中动态生成的元素没有点击事件或者只有一次点击事件
今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...
随机推荐
- Redis4.0.14 迁槽失败
线上一个redis集群中主节点使用的内存达到了9.78g,按照redis单个实例最大内存不要超出10g的规范,扩容操作就放在了今天晚上进行.因为之前redis迁槽都是采用 redis-trib.rb ...
- 【openstack】红帽公开课笔记内容openstack
overcloud节点自省失败(introspection) 节点自省--获取overcloud
- 创建第一个c程序
创建,组织,生成 ,生成. 1.我们先创建一个win32项目. 文件->新建->项目->Visual C++ ->Win32 输入项目名称 选择项目保存位置 很重要的一 ...
- XCTF练习题---CRYPTO---safer-than-rot13
XCTF练习题---CRYPTO---safer-than-rot13 flag:no_this_is_not_crypto_my_dear 解题步骤: 1.观察题目,下载附件 2.打开后发现是个文件 ...
- XCTF练习题---MISC---give_you_flag
XCTF练习题---MISC---give_you_flag flag:flag{e7d478cf6b915f50ab1277f78502a2c5} 解题步骤: 1.观察题目,下载附件 2.打开发现是 ...
- VSCODE调试时在cygwin.S中发生段错误
起因: C++实现矩阵类和向量类 当看了我实现的矩阵类后,一个同学问我: 然后我就试了试1000维,结果运行时在cygwin.S里引发了奇奇怪怪的Segmentation fault,而且这个文件还是 ...
- 流量录制回放工具jvm-sandbox-repeater入门篇——服务部署
趋于当前技术不断更新.产品功能多元化之下,流量回放的热度也是越来越高. 在前一段时间,测试团队也提到阿里开源的流量回放工具 jvm-sandbox-repeater 我个人就先尝试一下,期间还是遇到一 ...
- 如何基于 ZEGO SDK 实现 Android 通话质量监测
功能简介 在进行视频通话过程中,用户有时候会出现网络不好的情况,比如在进行多人视频通话或者多人唱歌时,我们需要实时显示用户的网络质量. 示例源码 参考 下载示例源码 获取源码. 相关源码请查看 &qu ...
- pytorch入门--土堆深度学习快速入门教程
工具函数 dir函数,让我们直到工具箱,以及工具箱中的分隔区有什么东西 help函数,让我们直到每个工具是如何使用的,工具的使用方法 示例:在pycharm的console环境,输入 import t ...
- kNN-画图
现在我们想要展示一些可视化内容 首先导包,如果是在jupyter notebook上,需要加入魔法函数:%matplotlib inline,这表示可以在jupyter上直接画图 import dat ...