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方法来绑定事件。
***要获取到添加动态事件的父节点,并且这个父节点是刚开始就存在的(代码中原本就有的)***
jquery on()动态绑定元素的的点击事件无反应的问题记录的更多相关文章
- jQuery给同一个元素两个点击事件
$(".course-form .course-start img").each(function(i) { $(this).toggle(function(){ $(this). ...
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- 如何使用chrome浏览器进行js调试找出元素绑定的点击事件
大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或 ...
- jquery如何判断元素是否被点击、属性操作、class操作
1.通过点击事件发生后,改变标志位的值,记录点击状态 function(){ var isClick = false; $('#test').click(function(){isClick = tr ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- jquery datables ajax分页后的点击事件无效是怎么回事
异步请求数据后,动态向table中追加行,行点击事件失效 动态加入到DOM中的对象无法继承原有的事件,所以无效,举例: // $.ajax... ajax部分省略 var tr = "&qu ...
- jquery+javascript触发a标签的点击事件
今天项目经理跟我说window.open()在一些浏览器上会被拦截,当时的解决方案是:用a标签的target="_blank"属性也可以打开窗体页面 于是解决了A问题出现了B问题: ...
随机推荐
- .Net 上传图片之前获取图片的宽高
Stream st = Request.Files[0].InputStream; Byte[] buffer = new Byte[st.Length]; ...
- Python中time和datetime模块的简单用法
python中与时间相关的一个模块是time模块,datetime模块可以看为是time模块的高级封装. time模块中经常用到的有一下几个方法: time()用来获取时间戳,表示的结果为从1970年 ...
- 数据结构--汉诺塔递归Java实现
/*汉诺塔递归 * 1.将编号0-N-1个圆盘,从A塔座移动到B上面 * 2.将编号N的1个圆盘,从A移动到C上面 * 3.最后将B上面的N-1个圆盘移动到C上面 * 注意:盘子的编号从上到下1-N ...
- 几种常用的ajax 跨域请求
前 言 首先,我们要明白,什么是跨域,为什么要跨域. 由于JS中存在同源策略.当请求不同协议名不同端口号下面的文件时,将会违背同源策略,无法请求成功!需要进行跨域处理! 这篇文章就为大家详细介绍一 ...
- Python的property装饰器的基本用法
Python的@property装饰器用来把一个类的方法变成类的属性调用,然后@property本身又创建了另一个装饰器,用一个方法给属性赋值.下面是在类中使用了@property后,设置类的读写属性 ...
- Nginx-动态路由升级版
前几篇文章我们介绍了Nginx的配置.OpenResty安装配置.基于Redis的动态路由以及Nginx的监控. Nginx-OpenResty安装配置 Nginx配置详解 Nginx技术研究系列1- ...
- MySQLbase
/*多行注释*/-- 单行注释-- 创建用户: CREATE USER '用户名'[@'主机名'] IDENTIFIED BY '密码'-- 主机名可以为空,省略主机名表示默认权限为%, 所有主机都可 ...
- C++雾中风景1:友元类与面向对象
因为后续准备入职的公司都希望能转C++,所以最近也是按部就班的开始进行C++的学习.然后这个系列的文章打算探究C++的语言特性,也比较一下不同语言(如Java,Scala,Python,Go)之间的设 ...
- Python学习--语句
一.print 和 import print 打印多个表达式,用逗号隔开 >>> print 'ab','cd' ab cd import import somemodule fro ...
- 在ASP.NET开发中一些单词的标准缩写
有些词可能共用一些缩写.带星号的缩写或词来源于PeopleSoft标准. The following standard word abbreviations should be used in nam ...