1.jquery使用版本:v2.0

2.重现代码:

html

  1. <table class="table">
  2. <thead>
  3. <tr>
  4. <th style="width: 5.1%;">
  5. <div class="checkboxed checkboxAll"></div>
  6. </th>
  7. <th>ID</th>
  8. <th>姓名</th>
  9. <th>电话</th>
  10. <th>电话归属地</th>
  11. <th>IP归属地</th>
  12. <th>来源</th>
  13. <th>等级</th>
  14. <th>状态</th>
  15. <th>站台</th>
  16. </tr>
  17. </thead>
  18. <tbody>
  19.  
  20. </tbody>
  21.  </table>

JS

  1. $('.table>tbody tr').on('click','.checkboxed',checkBoxed);

3.问题所在:

  .checkboxed是JS动态追加在tbody的复选框元素,调用方法之前的初始化页面是不存在这个元素;

  当我进行某个筛选条件后(例如下一页操作),表格内容改变,tr及其子元素重新渲染,操作复选框无任何反应!

4.修改代码:

  1. $('.table>tbody').on('click','.checkboxed',checkBoxed);

  

5.原因:

   on()方法动态绑定时,on事件之前的元素在页面中是要存在的,也就是说on前面的元素必须在页面加载的时候就存在于dom里面;

  table中因为TR元素不存在,对之后追加的tr动态绑定事件无效,操作起来无任何反应;

  tbody在最初渲染时就存在,当动态添加的复选框元素到页面时,再操作复选框就有效。

6.总结:

  动态绑定是指动态添加的DOM节点或者html元素,它们最开始渲染的时候是不存在的;

  如果要给这些动态加入的DOM节点动态增加事件,就必须要用jquery的on方法来绑定事件。

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

jquery on()动态绑定元素的的点击事件无反应的问题记录的更多相关文章

  1. jQuery给同一个元素两个点击事件

    $(".course-form .course-start img").each(function(i) { $(this).toggle(function(){ $(this). ...

  2. jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

    前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...

  3. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  4. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  5. 如何使用chrome浏览器进行js调试找出元素绑定的点击事件

    大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或 ...

  6. jquery如何判断元素是否被点击、属性操作、class操作

    1.通过点击事件发生后,改变标志位的值,记录点击状态 function(){ var isClick = false; $('#test').click(function(){isClick = tr ...

  7. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  8. jquery datables ajax分页后的点击事件无效是怎么回事

    异步请求数据后,动态向table中追加行,行点击事件失效 动态加入到DOM中的对象无法继承原有的事件,所以无效,举例: // $.ajax... ajax部分省略 var tr = "&qu ...

  9. jquery+javascript触发a标签的点击事件

    今天项目经理跟我说window.open()在一些浏览器上会被拦截,当时的解决方案是:用a标签的target="_blank"属性也可以打开窗体页面 于是解决了A问题出现了B问题: ...

随机推荐

  1. .Net 上传图片之前获取图片的宽高

    Stream st = Request.Files[0].InputStream;                  Byte[] buffer = new Byte[st.Length];      ...

  2. Python中time和datetime模块的简单用法

    python中与时间相关的一个模块是time模块,datetime模块可以看为是time模块的高级封装. time模块中经常用到的有一下几个方法: time()用来获取时间戳,表示的结果为从1970年 ...

  3. 数据结构--汉诺塔递归Java实现

    /*汉诺塔递归 * 1.将编号0-N-1个圆盘,从A塔座移动到B上面 * 2.将编号N的1个圆盘,从A移动到C上面 * 3.最后将B上面的N-1个圆盘移动到C上面 * 注意:盘子的编号从上到下1-N ...

  4. 几种常用的ajax 跨域请求

      前 言 首先,我们要明白,什么是跨域,为什么要跨域. 由于JS中存在同源策略.当请求不同协议名不同端口号下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理! 这篇文章就为大家详细介绍一 ...

  5. Python的property装饰器的基本用法

    Python的@property装饰器用来把一个类的方法变成类的属性调用,然后@property本身又创建了另一个装饰器,用一个方法给属性赋值.下面是在类中使用了@property后,设置类的读写属性 ...

  6. Nginx-动态路由升级版

    前几篇文章我们介绍了Nginx的配置.OpenResty安装配置.基于Redis的动态路由以及Nginx的监控. Nginx-OpenResty安装配置 Nginx配置详解 Nginx技术研究系列1- ...

  7. MySQLbase

    /*多行注释*/-- 单行注释-- 创建用户: CREATE USER '用户名'[@'主机名'] IDENTIFIED BY '密码'-- 主机名可以为空,省略主机名表示默认权限为%, 所有主机都可 ...

  8. C++雾中风景1:友元类与面向对象

    因为后续准备入职的公司都希望能转C++,所以最近也是按部就班的开始进行C++的学习.然后这个系列的文章打算探究C++的语言特性,也比较一下不同语言(如Java,Scala,Python,Go)之间的设 ...

  9. Python学习--语句

    一.print 和 import print 打印多个表达式,用逗号隔开 >>> print 'ab','cd' ab cd import import somemodule fro ...

  10. 在ASP.NET开发中一些单词的标准缩写

    有些词可能共用一些缩写.带星号的缩写或词来源于PeopleSoft标准. The following standard word abbreviations should be used in nam ...