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 extend()详解及简单实例
May 06 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
如何基于jQuery实现五角星评分
Sep 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
PHP魔术方法使用方法汇总
2016/02/14 PHP
php实现的双色球算法示例
2017/06/20 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python模拟三级菜单效果
2017/09/11 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Selenium的使用详解
2018/10/19 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
自我评价的正确写法
2013/09/19 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
运动会稿件200字
2014/02/07 职场文书
教师自查自纠材料
2014/10/14 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
办公室主任岗位职责
2015/01/31 职场文书
民事答辩状格式范文
2015/05/21 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫