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实现前端分页功能
Mar 23 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jquery实现的放大镜效果示例
Feb 24 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP根据图片色界在不同位置加水印的方法
2015/07/01 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
js中this用法实例详解
2015/05/05 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
小程序转发探索示例
2019/02/19 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
改进Django中的表单的简单方法
2015/07/17 Python
浅谈Python 中整型对象的存储问题
2016/05/16 Python
利用Python破解验证码实例详解
2016/12/08 Python
python中返回矩阵的行列方法
2018/04/04 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python里dict变成list实例方法
2019/06/26 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
学生实习推荐信范文
2013/11/26 职场文书
教学器材管理制度
2014/01/26 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
节约用水标语
2014/06/11 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
劳动模范获奖感言
2015/07/31 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis