动态生成的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. 关于最近遇到的事件失效的原因:在原本的网页中(代码可见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为什么绑定事件会失效,以及如何解决相关推荐
- jQuery动态生成的元素如何绑定事件
这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来 ...
- 动态生成的DOM做点击事件无效
有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section>测试动态生成的DOM点击事件<br ...
- js动态生成的DOM绑定事件失效的问题
事件委托原理:事件冒泡机制. 优点:1. 可以大量节省内存占用,减少事件注册.比如ul 上代理所有li 的click 事件. 2. 可以实现当新增子对象时,无需再对其事件进行绑定.对动态内容部分尤为合 ...
- 动态生成的DOM不会触发onclick事件的原因及解决方法
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='g ...
- 动态生成html点击事件无效,动态生成的DOM不会触发onclick事件的原因及解决方法...
最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的点击加载评论. 然后再写 $(".get_comment ...
- jQuery Dom 操作,动态生成dom,绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
- DOM的绑定事件事件
DOM事件的绑定 DOM 事件允许javascript在html中注册不同事件的处理程序 事件通常于函数结合使用,函数不会在事件发生前执行! 事件 事件是浏览器默认具备行为,不论是否基于js的绑定方法 ...
- layui图片上传按钮按着没反应_关于layui动态生成文件上传按钮后点击无效的解决办法...
首先,这是一个坑,大坑,网上一大堆写的云里雾里,不知所以,转了一圈,除了copy就是copy,Jesus God,花了一晚上,走通了这个坑,话不多说,直接解决 layui版本: layui-v2.5. ...
- js 动态生成button 并设置click事件
<div id="MyDiv"></div> <script> function AddButton() {var MyDiv =documen ...
最新文章
- 100G内存下,MySQL查询200G大表会OOM么?
- asp.net基础复习(二)——母版页
- 微信小程序图片轮转播放
- DriveInfo类取得计算机的磁盘信息
- java object 详解_Java基础之Object类详解
- 数据库设计笔记——有效设计数据库的目标(二)
- mongoose populate 返回 指定 字段
- Linus Torvalds:我们都老了,但Linux维护者真的很难找
- 数据类型和Json格式
- 小乌龟同步主支代码_《我的世界》游戏理论:人类,有没有可能就是一串“代码”?...
- Zabbix监控介绍配置zabbix架构
- 商务办公软件应用与实践【9】
- Visual Studio爆炸! -VS2010 SP1 * BETA *已发布,上下文
- Micrium 开放了µC/OS-III源代码
- 域名注册管理机构域名注册服务机构的基本概念
- JavaSE经典编程题
- Appium 连接夜神模拟器并启动
- 科技培训专业委员会成立,乐博乐博正式成为会员单位
- 您的Goole帐号已被暂时停用您的帐号违反了“规避系统”政策。
- android 8.0 支付宝,新版支付宝钱包8.0发布(注意!有bug出没)