jQuery clone()没有克隆事件绑定,即使是on()

Question

我创建了一系列用于移动Web应用程序的自定义jQuery事件.它们运行良好且经过测试.但是,我遇到了一个小问题,我无法理解.

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

有没有人遇到这个,有人知道潜在的工作吗？我认为使用.on()应该保留现在或将来存在的元素的绑定？

Answer 1

我认为你应该使用.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.