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 ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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作的文本留言本的例子(六)
2006/10/09 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS中递归函数
2016/06/17 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
在小程序中使用canvas的方法示例
2018/09/17 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
编辑个人求职信范文
2013/09/21 职场文书
文明村镇申报材料
2014/05/06 职场文书
软环境建设心得体会
2014/09/09 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
最感人的道歉情书
2015/05/12 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS