关于动态生成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绑定事件失效的原因的更多相关文章
- 关于 js 动态生成html 绑定事件失效的问题
在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...
- JQ动态生成节点绑定事件无效问题
最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态 ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- layui表格点击排序按钮后,表格绑定事件失效解决方法
最近项目使用layui较为频繁,遇到了一个麻烦的问题,网上搜索也没有看到同类型的问题,故此记下来. 需求是点击上图右侧表格中某一个单元格,会触发点击事件如下代码: $("table>t ...
- JavaScript Dom 绑定事件
JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...
- Android开发(十六)——Android listview onItemClick事件失效的原因
参考: Android listview onItemClick事件失效的原因.http://blog.csdn.net/wangchun8926/article/details/8793178
- HTML中动态生成内容的事件绑定问题【转载】
转自 http://www.hitoy.org/event-binding-problem-of-dynamically-generated-content.html 由于实际的需要,有时需要往网页中 ...
- jquery每次动态加载dom,绑定事件会多一次,
jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次 解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...
- jQuery1.9之后使用on()绑定 动态生成元素的 事件无效
来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...
随机推荐
- Windows下配置nginx根目录的问题
location / { root E:/xampp/htdocs/html5/php/yii2-rest-master/rest/web; index index.html index.htm; } ...
- display:none与visibility: hidden的区别
display:none和visibility: hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. ...
- MySQL备份学习
备份分类 物理和逻辑备份 物理备份直接拷贝数据库目录和文件,适合数据量大.重要且需要在出现问题时快速恢复的数据库 逻辑备份保存信息包括逻辑数据库结构(数据库表的创建脚本)和内容(插入语句或者分隔符平面 ...
- 关于YUV格式数据
(1) YUV格式有两大类:planar和packed.对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点 ...
- linux C学习笔记05--信号量与共享内存(进程同步)
花了半天时间把信号量与共享内存整合到了一起,先来看信号量代码,semaphore.c 当中sem_P()和sem_V()函数分别为信号量等待和信号量释放. 两个进程同时访问共享内存,为了避免发生同时读 ...
- UVa 445 - Marvelous Mazes
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=94&page=s ...
- 《算法设计手册》面试题解答 第五章:图的遍历 附:DFS应用之找挂接点
第五章面试题解答 5-31. DFS和BFS使用了哪些数据结构? 解析: 其实刚读完这一章,我一开始想到的是用邻接表来表示图,但其实用邻接矩阵也能实现啊?后来才发现应该回答,BFS用队列实现:DFS可 ...
- pyhton函数——黑板客老师课程学习
1.基本语法 语法: def func_name (arguments) 定义 statements return x,y x,y=func_name(para) 调用 作用域: 可以给内置的函 ...
- sql中列数据横着显示
列数据横着显示:CREATE TABLE StudenScore(stuname VARCHAR(25) , kc VARCHAR(25) , fs INT)INSERT INTO StudenSco ...
- fastJson java后台转换json格式数据
什么事JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Progra ...