关于动态生成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 相关文章推荐
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JS常用知识点整理
Jan 21 Javascript
深入理解node.js之path模块
May 03 Javascript
关于vue-router路径计算问题
May 10 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
Javascript Promise用法详解
May 10 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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
构建简单的Webmail系统
2006/10/09 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python的装饰器用法学习笔记
2016/06/24 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
护理工作个人总结
2015/03/03 职场文书
工作自我推荐信范文
2015/03/25 职场文书
人民的好儿女观后感
2015/06/18 职场文书
Django 实现jwt认证的示例
2021/04/30 Python