专栏首页前端说吧Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

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 条评论
登录 后参与评论

相关文章

  • JS-在线运行代码小工具

    xing.org1^
  • css - 兼容适配坑点总结(。。。)

    1. transform为代表的这些css3属性一定要写-webkit-,不然低版本(目前遇到的是8)的苹果,不支持。

    xing.org1^
  • css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

    左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

    xing.org1^
  • TAMUCTF-2019 Write up

    gets可以造成栈溢出,最终只需要劫持程序执行流到printflag函数就行,strncpy中将src拷贝到dest上可以覆盖栈上的v2指针,而two函数和pr...

    安恒网络空间安全讲武堂
  • 通过在线社交网络确定广告活动的最佳目标k (CS SI)

    我们提出了一种新颖的方法,用于向广告商(如品牌)推荐可能的客户(用户),主要基于两个方面。(1)在线社交网络的资料比较,和(2)在线社交网络的邻域分析。用户和品...

    Antonia
  • CMU 领域自适应最新进展:对齐数据分布、误差还不够,标注函数也需对齐!

    领域自适应是迁移学习重点研究的课题之一。以往,基于域不变表征的领域自适应方法由于对域偏移(domain shift)不敏感、能为目标任务获取丰富信息受到了极大关...

    AI科技评论
  • TensorFlow 图形学入门

    近年来,可嵌入到神经网络结构中的新型可微的图形层不断出现。从空间转换器到可微的图形渲染器,这些新层利用多年计算机视觉和图形研究中获得的知识来构建新的、更高效的网...

    AI研习社
  • linux命令基础(3)

    6、复制/etc/grub.cfg配置文件至/tmp目录,用查找替换命令删除/tmp/grub.cfg文件中的行首的空白字符; :%s/^[[:space:]]...

    py3study
  • pandas+PyQt5轻松制作数据处理工具

    由于在工作中需要处理很多日志文件数据,这些数据并不存在于数据库,而是以每日1个单文件的形式存在,为了让我们在日常数据处理中更方便的进行一些基础的数据合并、清洗筛...

    朱小五
  • 实战|用pandas+PyQt5制作一款数据分组透视处理工具

    早起导读:pandas是Python数据处理的利器,如果每天都要使用pandas执行同样的操作,如何制作一个有界面的软件更高效的完成?本文提供了一种基于PyQt...

    刘早起

扫码关注云+社区

领取腾讯云代金券