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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jquery轮播图插件使用方法详解
Jul 31 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 学习提高路线分享
2011/10/23 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
javascript 常用功能总结
2012/03/18 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
学习python的几条建议分享
2013/02/10 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Python新手学习raise用法
2020/06/03 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
刮痧观后感
2015/06/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
创业计划书之面包店
2019/09/17 职场文书
七个Python必备的GUI库
2021/04/27 Python
Python语言中的数据类型-序列
2022/02/24 Python