jquery on()动态绑定元素的的点击事件无反应的问题记录
2017-12-21 11:40
435 查看
1.jquery使用版本:v2.0
2.重现代码:
html
JS
3.问题所在:
.checkboxed是JS动态追加在tbody的复选框元素,调用方法之前的初始化页面是不存在这个元素;
当我进行某个筛选条件后(例如下一页操作),表格内容改变,tr及其子元素重新渲染,操作复选框无任何反应!
4.修改代码:
5.原因:
on()方法动态绑定时,on事件之前的元素在页面中是要存在的,也就是说on前面的元素必须在页面加载的时候就存在于dom里面;
table中因为TR元素不存在,对之后追加的tr动态绑定事件无效,操作起来无任何反应;
tbody在最初渲染时就存在,当动态添加的复选框元素到页面时,再操作复选框就有效。
6.总结:
动态绑定是指动态添加的DOM节点或者html元素,它们最开始渲染的时候是不存在的;
如果要给这些动态加入的DOM节点动态增加事件,就必须要用jquery的on方法来绑定事件。
***要获取到添加动态事件的父节点,并且这个父节点是刚开始就存在的(代码中原本就有的)***
2.重现代码:
html
<table class="table"> <thead> <tr> <th style="width: 5.1%;"> <div class="checkboxed checkboxAll"></div> </th> <th>ID</th> <th>姓名</th> <th>电话</th> <th>电话归属地</th> <th>IP归属地</th> <th>来源</th> <th>等级</th> <th>状态</th> <th>站台</th> </tr> </thead> <tbody> </tbody> </table>
JS
$('.table>tbody tr').on('click','.checkboxed',checkBoxed);
3.问题所在:
.checkboxed是JS动态追加在tbody的复选框元素,调用方法之前的初始化页面是不存在这个元素;
当我进行某个筛选条件后(例如下一页操作),表格内容改变,tr及其子元素重新渲染,操作复选框无任何反应!
4.修改代码:
$('.table>tbody').on('click','.checkboxed',checkBoxed);
5.原因:
on()方法动态绑定时,on事件之前的元素在页面中是要存在的,也就是说on前面的元素必须在页面加载的时候就存在于dom里面;
table中因为TR元素不存在,对之后追加的tr动态绑定事件无效,操作起来无任何反应;
tbody在最初渲染时就存在,当动态添加的复选框元素到页面时,再操作复选框就有效。
6.总结:
动态绑定是指动态添加的DOM节点或者html元素,它们最开始渲染的时候是不存在的;
如果要给这些动态加入的DOM节点动态增加事件,就必须要用jquery的on方法来绑定事件。
***要获取到添加动态事件的父节点,并且这个父节点是刚开始就存在的(代码中原本就有的)***
相关文章推荐
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
- jQuery on()方法绑定动态元素的点击事件
- jQuery on()方法绑定动态元素的点击事件
- jQuery on()方法绑定动态元素的点击事件实例代码浅析
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
- jQuery on()方法绑定动态元素的点击事件实例代码浅析
- jQuery on()方法绑定动态元素的点击事件无效
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- jQuery on()方法绑定动态元素的点击事件无响应的解决办法
- 解决jquery动态创建元素绑定事件失效问题
- angular中动态添加的元素绑定事件问题
- 使用jquery on()方法解决html页面点击元素,事件无响应的问题
- JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?
- jquery使用live绑定toggle事件,第一次点击没有反应,第2次才起作用问题
- 关于jQuery动态加载元素之后绑定事件无法触发的问题
- jQuery使用on()绑定动态生成元素的事件无效的问题
- jQuery on()绑定动态元素出现的问题小结