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封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery实现抽奖功能
Oct 22 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 extract 将数组拆分成多个变量的函数
2010/06/30 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
C语言笔试题回忆
2015/04/02 面试题
授权委托书
2014/07/31 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
对学校的意见和建议
2015/06/04 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
Fluentd搭建日志收集服务
2022/09/23 Servers