jquery on()动态绑定元素的的点击事件无反应的问题记录

1.jquery使用版本：v2.0

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方法来绑定事件。

　　***要获取到添加动态事件的父节点，并且这个父节点是刚开始就存在的（代码中原本就有的）***