如何将一个div的内容镜像到另一个？

Question

我正在尝试在屏幕上将一个div的内容显示为另一个div。 我要复制的div有一组按钮，并且我想从字面上反映内容，因此所有javascript funcitons / listener仍将起作用。

我试过了：

$("#copy").appendTo("#target");

$(#copy).clone().appendTo("#target");

上面的两行都复制了按钮和类，但是原始按钮所附的javascript都不起作用。 有谁知道我该怎么做吗？

听起来可能很奇怪，但对于我想做的事情却是必要的。

Answer 1

我会尝试这样做：

$(#copy).html().clone(true).appendTo("#target");

或这个：

$(#copy).clone(true).attr.('id', 'some_other_id').appendTo("#target");

...以防止重复的ID方案。 当然，您需要检查所有后代元素是否存在同一问题。

然后，考虑事件处理程序：

通常，绑定到原始元素的任何事件处理程序都不会复制到克隆中。 可选的withDataAndEvents参数允许我们更改此行为，并改为也将所有事件处理程序的副本绑定到该元素的新副本。 从jQuery 1.4开始，所有元素数据（由.data（）方法附加）也被复制到新副本。

进一步了解

最好的方法可能是使用事件委托（通过on()方法）和类选择器。 这样，您新克隆的内容就可以正常工作。

Answer 2

您是否尝试将withDataAndEvents设置为true？ 如果查看有关克隆的文档，则默认为false；否则，默认为false。

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

withDataAndEvents (default: false)
Type: Boolean
A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

也许尝试克隆

$("#clone").clone(true, true)

同样，如果您只是克隆输入，这应该可以工作。 某些表单元素的动态状态（例如，键入文本区域的用户数据以及对选择进行的用户选择）不会复制到克隆的元素中。 在克隆输入元素时，该元素的动态状态（例如，输入到文本输入中的用户数据以及对复选框所做的用户选择）保留在克隆的元素中。