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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
使用jquery实现轮播图效果
Jan 02 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
什么是MVC,好东西啊
2007/05/03 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
javascript关于继承解析
2016/05/10 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Python中itertools模块用法详解
2014/09/25 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
实例讲解python中的序列化知识点
2018/10/08 Python
如何通过python实现人脸识别验证
2020/01/17 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
学生社团文化节开幕式主持词
2014/03/28 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
死者家属慰问信
2015/03/24 职场文书
财务稽核岗位职责
2015/04/13 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL