JQuery事件委托(适用于给动态生成的脚本元素添加事件)


Posted in jQuery onFebruary 01, 2020

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是:

移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。研发也美滋滋的开始开发。

但是,好景不长。。。

研发加了ajax事件后,我的交互效果有部分受了影响!

一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天。最后没解决。我就回来了。

后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名?

回:加着呢啊!我一看模拟器,确实加着呢。但是看源码,没有,因为他使用ajax后期加的。。所以一开始事件找不到“接头人”就没有执行。

扫噶,定位到问题,就好解决了。

之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。今天逮到了就不能放过!

jq写了点击事件,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。

正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah)

jquery中动态新增的元素节点无法触发事件问题(同上) 

解决方法:

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

值得注意的是:亲测此方法无效,可能是我用的jq的版本太高了,1.9多,已经不支持这个方法了

第二个方法:

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。

$("div").delegate("button","click",function(){
 console.log("start")
})

div下面的button点击的时候,打印start,这个button可以是动态生成的

王者方法:on

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
Jquery Datatables的使用详解
Jan 30 #jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 #jQuery
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
jQuery实现轮播图效果demo
Jan 11 #jQuery
You might like
php 保留字列表
2012/10/04 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python assert关键字原理及实例解析
2019/12/13 Python
python中图像通道分离与合并实例
2020/01/17 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python正则表达式学习小例子
2020/03/03 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
优秀毕业生推荐信范文
2014/03/07 职场文书
护士自荐信范文
2015/03/25 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
《打电话》教学反思
2016/02/22 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
nginx 添加http_stub_status_module模块
2022/05/25 Servers
Python日志模块logging用法
2022/06/05 Python