javascript - jQuery clone() 不克隆事件绑定(bind)，即使使用 on()

Question

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

我在 DOM 中的几个元素上使用 .clone()，其中包含一个按钮。该按钮绑定(bind)了一些自定义事件(事件使用 .on() 绑定(bind))，但是。不幸的是，当我使用 jQuery 的 .clone() 时，绑定(bind)没有保留，我必须重新添加它们。

有没有人以前遇到过这个，有人知道潜在的解决方法吗？我认为使用 .on() 应该保留现在或将来存在的元素的绑定(bind)？

Answer 1

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

$element.clone(true, true);

clone( [withDataAndEvents] [, deepWithDataAndEvents] )

withDataAndEvents: A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false.

deepWithDataAndEvents: A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

---

请注意，.on() 实际上并未将事件绑定(bind)到目标，而是绑定(bind)到您要委派给的元素。所以如果你有:

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

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

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

如果您在 #container 的父级上使用 .on()，则没有必要这样做。