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

我创build了一系列用于移动Web应用程序的自定义jQuery事件。 他们工作很好,并经过testing。 但是,我遇到了一个我无法理解的小问题。

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

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

我想你应该使用.clone()方法的重载:

 $element.clone(true, true); 

克隆([withDataAndEvents] [,deepWithDataAndEvents])

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

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


请注意, .on()实际上不会将事件绑定到目标,而是绑定到要委派的元素。 所以如果你有:

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

事件实际上绑定到#container 。 当一个.button元素发生点击时,它会起泡到#container元素。触发事件的元素将根据.on()的selector参数进行.on() ,如果匹配,则执行事件处理程序。 这是事件代表团的工作原理。

如果您复制元素#container,则必须深入克隆使用.on()进行的绑定的事件和数据才能被保留。

如果您在#container的父级上使用.on() ,则这不是必需的。

你应该意识到事实上,深入的克隆function被添加到1.5 jQuery版本。

有关此主题的更多信息:

http://api.jquery.com/clone/