我有一些代码,我循环遍历页面上的所有选择框并将 .hover
事件绑定到它们,以便在 mouse on/off
上对它们的宽度进行一些调整 .
这发生在页面准备就绪并且工作得很好 .
我遇到的问题是,我在初始循环后通过Ajax或DOM添加的任何选择框都没有绑定事件 .
我找到了这个插件(jQuery Live Query Plugin),但在我用插件添加另外5k到我的页面之前,我想知道是否有人知道这样做的方法,无论是直接使用jQuery还是通过其他选项 .
我有一些代码,我循环遍历页面上的所有选择框并将 .hover
事件绑定到它们,以便在 mouse on/off
上对它们的宽度进行一些调整 .
这发生在页面准备就绪并且工作得很好 .
我遇到的问题是,我在初始循环后通过Ajax或DOM添加的任何选择框都没有绑定事件 .
我找到了这个插件(jQuery Live Query Plugin),但在我用插件添加另外5k到我的页面之前,我想知道是否有人知道这样做的方法,无论是直接使用jQuery还是通过其他选项 .
23 回答
使用jQuery(html, attributes)动态创建时,可以将事件附加到元素 .
您可以使用live()方法将元素(甚至是新创建的元素)绑定到事件和处理程序,例如onclick事件 .
下面是我编写的示例代码,您可以在其中看到live()方法如何将所选元素(甚至是新创建的元素)绑定到事件:
这就是动态创建的元素不响应点击的原因:
作为解决方法,您必须收听所有点击并检查源元素:
这称为“事件委托” . 好消息,它是jQuery的内置功能:-)
尝试使用
.live()
而不是.bind()
;执行Ajax请求后,.live()
会将.hover
绑定到您的复选框 .动态创建元素的事件绑定
Single element:
Child Element:
注意添加的
*
. 将为该元素的所有子项触发事件 .我注意到:
它不再起作用了,但它以前工作过 . 我一直在使用谷歌CDN的jQuery,但我不知道他们是否改变了它 .
使用jQuery http://api.jquery.com/on/的
.on()
方法将事件处理程序附加到live元素 .从版本1.9开始,
.live()
方法也被删除 .jQuery.fn.on的文档中有一个很好的解释 .
简而言之:
因此,在以下示例中,必须在生成代码之前存在
#dataTable tbody tr
.如果将新HTML注入页面,则最好使用委托事件来附加事件处理程序,如下所述 .
Delegated events 具有以下优点:它们可以处理来自稍后添加到文档的后代元素的事件 . 例如,如果表存在,但是使用代码动态添加行,则以下将处理它:
除了能够处理尚未创建的后代元素上的事件之外,委派事件的另一个优点是,当必须监视许多元素时,它们可能会有更低的开销 . 在
tbody
中包含1,000行的数据表中,第一个代码示例将处理程序附加到1,000个元素 .委托事件方法(第二个代码示例)将事件处理程序仅附加到一个元素
tbody
,并且事件只需要冒泡一个级别(从单击的tr
到tbody
) .Note: 委托事件不适用于SVG .
More flexible solution 创建元素并绑定事件(source)
注意:这将为每个元素创建一个事件处理程序实例(在循环中使用时可能会影响性能)
As of jQuery 1.7 你应该使用jQuery.fn.on:
Prior to this ,推荐的方法是使用live():
但是,
live()
在1.7中弃用了on()
,在1.9中被完全删除 .live()
签名:...可以用以下on()签名替换:
例如,如果您的页面是动态创建类名为
dosomething
的元素,您可以将事件绑定到 a parent which already exists (这是问题的核心,您需要存在要绑定的内容,不要绑定到动态内容) ,这可能是(也是最简单的选择)是document
. 虽然记住document may not be the most efficient option .绑定事件时存在的任何父级都可以 . 例如
适用于
您可以在创建对象时向对象添加事件 . 如果要在不同时间向多个对象添加相同的事件,则可能需要创建命名函数 .
试试这样 -
这是一个没有任何库或插件的 pure JavaScript 解决方案:
hasClass
在哪里现场演示
归功于Dave和Sime Vidas
使用更现代的JS,
hasClass
可以实现为:这是通过事件委托完成的 . Event将绑定在wrapper-class元素上,但会被委托给selector-class元素 . 这是它的工作原理 .
注意:
wrapper-class元素可以是ex . 文件,正文或你的包装 . 包装器应该已经存在 .
我更喜欢使用选择器并将其应用于文档 .
这将绑定在文档上,并将适用于页面加载后将呈现的元素 .
例如:
我更喜欢以模块化函数方式部署事件侦听器,而不是编写
document
级事件侦听器的脚本 . 所以,我喜欢下面的内容 . 注意,你可以't oversubscribe an element with the same event listener so don' t担心不止一次地附上一个听众 - 只有一个人 .记下放置元素的“MAIN”类,例如
在上面的场景中,jQuery将观看的MAIN对象是“容器” .
那么你基本上会在容器下面有元素名称,例如
ul
,li
和select
:您可以简单地将事件绑定调用包装到一个函数中,然后调用它两次:一次在文档就绪,一次在您添加新DOM元素的事件之后 . 如果这样做,您将希望避免在现有元素上绑定相同的事件两次,因此您需要解除现有事件的绑定或(更好)仅绑定到新创建的DOM元素 . 代码看起来像这样:
我正在寻找一个解决方案,让
$.bind
和$.unbind
在动态添加的元素中没有问题 .由于on()制作附加事件的技巧,为了对我来到的人创建一个虚假的解除绑定:
你可以用
要么
这两种方法是等价的,但参数顺序不同 .
见:jQuery Delegate Event
在绑定事件时任何p arent that exists ,如果您的页面是 dynamically creating elements 且类名为 button ,您会将事件绑定到已存在的父级
将事件绑定到已存在的父级:
另一种解决方案是在创建元素时添加侦听器 . 不是将侦听器放在主体中,而是在创建它时将侦听器放入元素中: