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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery 选择器用法实例分析【prev + next】
May 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中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
2013/12/30 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
讲解vue-router之什么是动态路由
2018/05/28 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python实现简单的文字识别
2018/11/27 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
个人简历自荐信
2013/12/05 职场文书
火车的故事教学反思
2014/02/11 职场文书
爱护公共设施的标语
2014/06/24 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
Nginx利用Logrotate实现日志分割
2022/05/20 Servers