关于动态生成dom绑定事件失效的原因及解决方法


Posted in Javascript onAugust 06, 2016

之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下:

1. 事件失效的原因:

(1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了

(2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到的,因为网页只会执行一次初始化绑定,之后动态生成的dom元素也是监测不到的。

2. 解决办法:

(1)在每一个动态生成的地方都再绑定多一次事件,比如这个博客里面的例子

(2)把bind改用live,因为live是实时监测的,对于新增的dom元素也是有效的(因为不断去绑定、判断,所以可能会影响Web性能问题)

(3)把bind改用delegate,因为delegate是实时监测的。

(4)在jquery1.7 起版本用on替代了bind()、live() 和 delegate() 方法。

3. 关于最近遇到的事件失效的原因:在原本的网页中(代码可见https://github.com/UFOwl/ife/tree/master/stage02/task16),我想要获取table里面动态生成的删除按钮,帮删除按钮绑定删除时间,可是删除事件失效,因为删除按钮是动态生成的,初始化事件绑定的时候,获取到的table里面的button已经是空的,所以绑定的一直都是空元素,所以点击button按钮的时候一直没有反应。

4. 最后的解决办法:先获取table,然后再绑定table的click事件(因为table是在原本已经存在的dom元素),然后当点击事件触发的时候再捕获事件的target(比如点击table里面的button,这个时候因为已经动态生成button并append进去table里面了,所以button是存在的,此时target指的是button),然后再进行相应的操作。

注意:在这里注意两个问题:

(1)table里面的元素是已经添加进入table里面了的,所以点击那个button的时候,e.target获取到的就是button

(2)为什么已经将button这些元素添加进入table里面,可是还是没能获取到呢,因为是init()这个函数初始化的时候获取table里面的button,可是此时还未进行任何操作,所以获取到的就是空,所以没绑定任何元素。

上面需要注意的两个问题要分清楚,这个是问题的关键。

5.关于bind:每次绑定事件之后事件会一直绑定着,除非用unbind解绑之后再重新绑定,要不然事件会一直存在,所以这就是为什么在做项目的时候,有时候ajax请求的结果会出现1,2,4,8这样叠加,是因为如果用了bind,每次触发事件都会绑定一次操作,所以触发第一次的时候,ajax请求一次;第二次的时候,ajax请求1+1=2次;第三次就是1+2+1=4次;第四次就是1+2+4+1=8次,以此类推。所以如果利用bind绑定事件的话,要先unbind解绑元素原本有的事件再绑定事件,才不会导致ajax请求多次。

以上这篇关于动态生成dom绑定事件失效的原因及解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表格单元格交错着色实现思路及代码
Apr 01 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
深入理解JS DOM事件机制
Aug 06 #Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 #Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 #Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 #Javascript
JS获取和修改元素样式的实例代码
Aug 06 #Javascript
原生js获取元素样式的简单方法
Aug 06 #Javascript
浅析Node.js实现HTTP文件下载
Aug 05 #Javascript
You might like
怎样去阅读一份php源代码
2009/08/21 PHP
php数组一对一替换实现代码
2012/08/31 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
js 作用域和变量详解
2017/02/16 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
Python中基础的socket编程实战攻略
2016/06/01 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
教师求职信范文分享
2013/12/27 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
预备党员个人总结
2015/02/14 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android