当前位置: 首页 > 编程笔记 >

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

姚麒
2023-03-14
本文向大家介绍JQuery事件委托(适用于给动态生成的脚本元素添加事件),包括了JQuery事件委托(适用于给动态生成的脚本元素添加事件)的使用技巧和注意事项,需要的朋友参考一下

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

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

但是,好景不长。。。

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

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

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

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

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

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

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

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

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

解决方法:

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

第二个方法:

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

$("div").delegate("button","click",function(){
 console.log("start")
})

div下面的button点击的时候,打印start,这个button可以是动态生成的

王者方法:on

 类似资料:
  • 本文向大家介绍JavaScript动态添加事件之事件委托,包括了JavaScript动态添加事件之事件委托的使用技巧和注意事项,需要的朋友参考一下 先给大家讲下什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。 也就是:利用冒泡的原理,把事件加到

  • 本文向大家介绍jQuery给动态添加的元素绑定事件的方法,包括了jQuery给动态添加的元素绑定事件的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用l

  • 问题内容: 我正在竭尽全力试图找出为什么鼠标悬停事件无法与具有从ajax动态创建的元素的.on处理程序一起使用的原因。似乎唯一起作用的是带有.live的代码,但我知道它已被弃用。 但是,当我尝试使用.on时,它将不起作用-无论我尝试了什么变体(document.ready,.mouseover等) 事件处理程序位于代码的底部,因此它们最后执行。有人知道我在做什么错吗? 问题答案: 使用与新生成的元

  • 本文向大家介绍jQuery事件委托之Safari,包括了jQuery事件委托之Safari的使用技巧和注意事项,需要的朋友参考一下 什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 事件委托的原理 事件委托将事件监听绑定在目标元素的父级上,当目标元素响应事件时冒泡到绑定事件的父级上,进

  • 捕获和冒泡允许我们实现一种被称为 事件委托 的强大的事件处理模式。 这个想法是,如果我们有许多以类似方式处理的元素,那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。 在处理程序中,我们获取 event.target 以查看事件实际发生的位置并进行处理。 让我们看一个示例 —— 反映中国古代哲学的 八卦图。 如下所示:在新窗口中打开 在沙箱中打开 其 HTML 如

  • 本文向大家介绍jquery html动态添加的元素绑定事件详解,包括了jquery html动态添加的元素绑定事件详解的使用技巧和注意事项,需要的朋友参考一下 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 以上这篇jquery html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考