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 22 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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
WebQQ最新登陆协议的用法
2014/12/22 PHP
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python的链表基础知识点
2020/09/13 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
乡镇三项教育实施方案
2014/03/30 职场文书
党员群众路线承诺书
2014/05/20 职场文书
促销活动总结怎么写
2014/06/25 职场文书
卖车协议书范例
2014/09/16 职场文书
会议接待欢迎标语
2014/10/08 职场文书