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实现div跟随鼠标移动
Aug 20 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP生成器简单实例
2015/05/13 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
javascript delete 使用示例代码
2010/03/29 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
JS验证码实现代码
2017/09/14 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python获取当前时间的方法
2014/01/14 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
法人委托书范本
2014/09/15 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL