关于动态生成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 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
Js实现自定义右键行为
Mar 26 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
使用javascript做在线算法编程
May 25 Javascript
js实现简单的随机点名器
Sep 17 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 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python实现AES加密和解密
2019/03/27 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
《少年王勃》教学反思
2014/04/27 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年保卫工作总结
2014/12/05 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
Python 多线程处理任务实例
2021/11/07 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python