关于动态生成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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
Vue中的异步组件函数实现代码
Jul 20 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
express中static中间件的具体使用方法
Oct 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版)
2006/10/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
python opencv 实现对图像边缘扩充
2020/01/19 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python自动化操作实现图例绘制
2020/07/09 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
HTML5标签小集
2011/08/02 HTML / CSS
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
工商学院毕业生个人自我评价
2013/09/19 职场文书
轻化专业学生实习自我鉴定
2013/09/20 职场文书
婚前协议书怎么写
2014/04/15 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
维稳承诺书
2015/01/20 职场文书
义诊活动通知
2015/04/24 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
初中语文教学反思范文
2016/03/03 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python