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版本问题, 动态生 ...
随机推荐
- linux运行二进制文件编写方式
chmod +x ./test.sh #使脚本具有执行权限 ./test.sh #执行脚本 注意,一定要写成 ./test.sh,而不是 test.sh,运行其它二进制的程序也一样,直接写 test. ...
- HMS Core 6.4.0版本发布公告
支持转化事件回传至华为应用市场商业推广,便捷归因,实时调优: 卸载分析新增卸载前路径分析,深度剖析卸载根因. 查看详情 新增关键帧能力,通过关键帧点可实现图片.文字等位置移动.旋转等动态效果,比如文字 ...
- Java并发编程之Lock(同步锁、死锁)
这篇文章是接着我上一篇文章来的. 上一篇文章 同步锁 为什么需要同步锁? 首先,我们来看看这张图. 这是一个程序,多个对象进行抢票. package MovieDemo; public class T ...
- Quantexa CDI(场景决策智能)Syneo平台介绍
Quantexa 大数据服务提供商, 使用实体解析, 关系分析和人工智能技术帮助客户进行数据处理和预防金融犯罪. 企业概览 2016年成立, 当前规模500人 服务特色是场景决策智能CDI(conte ...
- 利用QEMU+GDB搭建Linux内核调试环境
前言 对用户态进程,利用gdb调试代码是很方便的手段.而对于内核态的问题,可以利用crash等工具基于coredump文件进行调试. 其实我们也可以利用一些手段对Linux内核代码进行gdb调试,qe ...
- XCTF练习题---CRYPTO---告诉你个秘密
XCTF练习题---CRYPTO---告诉你个秘密 flag:TONGYUAN 步骤解读: 1.观察题目,下载附件 2.打开附件,内容好像有点像十六进制,先进行一下十六进制转换,得到一串字符 网址:h ...
- [AcWing 823] 排列
点击查看代码 #include<iostream> using namespace std; const int N = 10; int n; void dfs(int u, int nu ...
- 2020年DevOps工程师入门指南
DevOps兴起于2010年代,到现在DevOps已经在行业中拥有了一席之地,并在继续发展壮大. 有兴趣成为一名DevOps工程师吗?如果想要成为一名DevOps工程师,需要做到以下五点: 要有开发者 ...
- 大白话详解HTTPS!
开源Linux 回复"读书",挑选书籍资料~ 我相信大家面试的时候对于 HTTPS 这个问题一定不会陌生,可能你只能简单的说一下与 HTTP 的区别,但是真正的原理是否很清楚呢?他 ...
- mmsegmentation中构造自己的数据集和数据加载部分,跑现有demo
在mmsegmentation中训练自己的数据集 先在mmse/dataset下创建一个python文件,我的名字是my_thermal_dataset.py 在其中填写下面内容 这里要注意,在设置s ...