jQuery clone()不会克隆事件绑定,即使使用on()


100

我创建了一系列用于移动Web应用程序的自定义jQuery事件。他们工作得很好,已经过测试。但是,我遇到了一个小问题,难以理解。

我正在.clone()DOM中使用一些元素,其中包含一个按钮。该按钮绑定了一些自定义事件(这些事件使用绑定.on()),但是。不幸的是,当我使用jQuery时.clone(),没有保留绑定,我不得不再次添加它们。

之前有人遇到过这种情况吗,有人知道有可能解决此问题吗?我以为使用.on()应该保留现在或将来存在的元素的绑定?


“我认为使用.on()应该保留现在或将来存在的元素的绑定?” -这与无关.clone; 这是jQuery的事件委托逻辑,如果您将附加选择器传递给,则可以使用.on
pimvdb 2012年

Answers:


213

我认为您应该使用.clone()方法的以下重载:

$element.clone(true, true);

clone([withDataAndEvents] [,deepWithDataAndEvents])

withDataAndEvents:一个布尔值,指示是否应将事件处理程序和数据与元素一起复制。默认值为false。

deepWithDataAndEvents:一个布尔值,指示是否应复制克隆元素的所有子级的事件处理程序和数据。默认情况下,它的值与第一个参数的值匹配(默认为false)。


注意.on()不要将事件实际绑定到目标,而是绑定到要委派的元素。因此,如果您有:

$('#container').on('click', '.button', ...);

这些事件实际上绑定到#container。当发生单击.button元素时,它会冒泡到该#container元素。触发事件的元素将根据的选择器参数进行评估.on(),如果匹配,则执行事件处理程序。这就是事件委托的工作方式。

如果克隆元素#container,则必须使用事件和数据进行深度克隆,.on()以保留要进行的绑定。

如果您.on()在的父项上使用,则没有必要#container


20
从来不知道.clone()接受的论点。FML。谢谢你的帮助。
BenM 2012年

1
@DidierGhys谢谢,我一直在努力.clone()不克隆DOM中的.data()所有data-xxxx="somedata"数据(包括DOM中的数据)。
理查德·德·威特

我问了这个问题,但没人回答我。你能帮助我吗?
阿里·索塔尼

太好了,我不得不做一个 click事件来追加新克隆的div。ready无法正常工作
csandreas1

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.