Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是:

移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件。自测各方面都挺好的,美滋滋的给了研发。研发也美滋滋的开始开发。

但是,好景不长。。。

研发加了ajax事件后,我的交互效果有部分受了影响!

一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天。最后没解决。我就回来了。

后来就找共同点,发现有个类名控制的交互都不能实现,最后去问研发,你是不是没加上我的类名?

回:加着呢啊!我一看模拟器,确实加着呢。但是看源码,没有,因为他使用ajax后期加的。。所以一开始事件找不到“接头人”就没有执行。

扫噶,定位到问题,就好解决了。

之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。今天逮到了就不能放过!

————————-----------------------------------------------------------非故事分割线------------------------------------------------------------------————————

jq写了点击事件,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。

正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah)

jquery中动态新增的元素节点无法触发事件问题(同上)

解决方法:

值得注意的是:亲测此方法无效,可能是我用的jq的版本太高了,1.9多,已经不支持这个方法了

第二个方法:

但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。

 王者方法:on

//模拟多个事件!成功
$(".hah").on('click','.shijian1',function(){
    alert('on-OK')
});
$(".hah").on('click','.shijian2',function(){
    alert('on-OK-多个事件')
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python绿色通道

抓取得到App音频数据

这两天知识星球Python绿色通道铁粉集中营上有球友要求布置一个抓取得到App数据的作业,于是我二话不说就撸了一把.

47540
来自专栏JarvanMo的IT专栏

Fluwx:让在Flutter中使用微信SDK成为可能

之前有了解的小伙伴可能已经看过Fluwx的一篇文章,不过那个时候Fluwx还是不太成熟。现在Fluwx的主体功能已经过成了。如果你正在或想开发一个Flutter...

2.1K20
来自专栏FreeBuf

揭秘:从内部源码看Facebook技术(第一集)

Warning 本文中所有代码都是通过合法途径获得。 写在前面 我是一名铁杆Facebook粉丝。Facebook为开源社区贡献了许多力量,经常开放他们内部的软...

55260
来自专栏Jerry的SAP技术分享

SAP UI 搜索分页技术

搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来。今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分...

27040
来自专栏知晓程序

只要 5 分钟,让你立刻拥有自己的小程序 | 知晓云

Hello,各位知晓程序的读者们,我是犯迷糊的小羊。目前是 ifanr 的一只前端攻城狮,同时也是知晓云团队的一员。

21930
来自专栏JarvanMo的IT专栏

Fluwx:让在Flutter中使用微信SDK成为可能

之前有了解的小伙伴可能已经看过Fluwx的一篇文章,不过那个时候Fluwx还是不太成熟。现在Fluwx的主体功能已经过成了。如果你正在或想开发一个Flutter...

61810
来自专栏糊一笑

Taro开发微信小程序之初体验

57420
来自专栏Guangdong Qi

iOS开发常用之网络、网页

37510
来自专栏互联网杂技

你知道吗?Web的26项基本概念和技术

Web 开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些 Web 开发中的基本概念和用到的技术,从...

368100
来自专栏VRPinea

撩妹必备技能之:如何用Unity 3D创建一个VR场景?

3K40

扫码关注云+社区

领取腾讯云代金券