如何在不破坏javascript的情况下使用Jquery将html从一个div移动到另一个div

Question

我的网页的不同部分有两个div，一个工作部分和一个参考部分。 一个是固定尺寸，另一个是可变尺寸，它们是垂直堆叠的。 我正在尝试设计它，以便如果您想在参考窗格中处理某些内容，则单击一个链接并在两个窗格之间交换所有数据。 我的想法是做以下事情：

var working = $("#working_pane").html();
var ref = $("#reference_pane").html();

$("#working_pane").html(ref);
$("#reference_pane").html(working);

这个问题，似乎在这些窗格中引用的任何javascript（例如，就地编辑器）在切换时都会被破坏。 没有javascript错误发生，只是没有任何反应，比如javascript绑定被破坏。

是否有任何移动html而不打破包含的JavaScript？

Answer 1

当您使用HTML文档的位工作时，你的目标应该是与作为内容浏览器发现，而不是HTML字符串的Node对象的工作。

要获取HTML，浏览器必须查看节点并将它们序列化为字符串。 然后，当您将该HTML分配给文档的另一部分（使用innerHTML或jQuery html(...) ）时，您告诉浏览器销毁以前在元素中的所有内容，费力地将HTML字符串解析回新的Node对象集，并将这些新节点插入到元素中。

这很慢，浪费，并且丢失了无法用序列化HTML表示的原始Node对象的任何方面，例如：

• 事件处理函数函数/监听器（这就是你的编辑器破坏的原因）
• 其他JavaScript代码对节点的变量引用（也打破了脚本）
• 表单字段值（部分由于错误而在IE中）
• 自定义属性

所以 - 这适用于你使用的是jQuery 还是普通的DOM - 不要抛弃HTML！ 获取原始节点对象并将它们插入到您想要的位置（它们将自动离开它们最初的位置）。 引用保持不变，因此脚本将继续工作。

// contents() gives you a list of element and text node children
var working = $("#working_pane").contents();
var ref = $("#reference_pane").contents();

// append can be given a list of nodes to append instead of HTML text
$("#working_pane").append(ref);
$("#reference_pane").append(working);

Answer 2

这可能是由于重复的ID导致的。 基本上你可能在div中有一个元素a，它具有id = id1，现在它存储在var中并被注入到一个新的div中。 现在看来你没有机制确保你没有同时重复的id。 这可以打破js

因此，请查看此内容，如果确实将元素首先存储在var中，则会删除原件，然后将其附加到新位置。