位置: 编程技术 - 正文
关于动态生成dom绑定事件失效的原因及解决方法(动态生成类对象)
编辑：rootadmin推荐整理分享关于动态生成dom绑定事件失效的原因及解决方法(动态生成类对象)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:动态生成需要关注哪几个方面,动态生成类,动态生成对象,动态生成xml,动态生成对象,动态生成对象,动态生成类,动态创建dom方式,内容如对您有帮助，希望把文章链接给更多的朋友！
之前做项目都是直接用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. 关于最近遇到的事件失效的原因：在原本的网页中（代码可见 最后的解决办法：先获取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绑定事件失效的原因及解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。
动态生成的DOM不会触发onclick事件的原因及解决方法 最近朋友在做一个项目的时候，遇到动态加载微博内容，然后点击展开评论后获取该微博的所有评论。这里使用了动态加载的spanmid='′class='get_com
jquery自动补齐功能插件flexselect用法示例 本文实例讲述了jquery自动补齐功能插件flexselect用法。分享给大家供大家参考，具体如下：这几天正在做一个东东。需要用到自动补齐的功能。也就是sele
jQuery调用Webservice传递json数组的方法 本文实例讲述了jQuery调用Webservice传递json数组的方法。分享给大家供大家参考，具体如下：Jquery由于提供的$.ajax强大方法，使得其调用webservice实现异步
标签: 动态生成类对象
本文链接地址:https://www.jiuchutong.com/biancheng/384138.html 转载请保留说明！上一篇：jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法(jquery easyui插件)
下一篇：动态生成的DOM不会触发onclick事件的原因及解决方法(动态生成xml)
