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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现的中英文切换功能示例
Jan 11 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
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
js输出列表实现代码
2010/09/12 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript多图片上传案例
2015/09/28 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
一些.net面试题
2014/10/06 面试题
实习医生自我评价
2013/09/22 职场文书
儿科护士自我鉴定
2013/10/14 职场文书
小学英语课后反思
2014/04/26 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
财政局个人总结
2015/03/04 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
2015年环境监察工作总结
2015/07/23 职场文书