如何在不破坏javascript的情况下使用Jquery将html从一个div移动到另一个div
我有两个div用于我的网页的不同部分，一个工作和一个参考部分。 一个是固定尺寸，另一个是可变尺寸，它们是垂直堆叠的。 我正在尝试设计它，以便如果您想在参考窗格中处理某些内容，则单击一个链接并在两个窗格之间交换所有数据。 我的想法是做以下事情：
var working = $("#working_pane").html(); var ref = $("#reference_pane").html(); $("#working_pane").html(ref); $("#reference_pane").html(working); 这个问题，似乎在这些窗格内引用的任何javascript（例如，就地编辑器）在切换时都会被破坏。 没有javascript错误发生，只是没有任何反应，就像javascript绑定被打破。
是否有任何移动HTML而不破坏包含的JavaScript？
当您处理HTML文档的某些部分时，您应该使用Node对象作为浏览器看到的内容，而不是HTML字符串。
要获取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);
这可能是由于重复的ID导致的。 基本上你可能在div中有一个元素a，它具有id = id1，现在它存储在var中并被注入到一个新的div中。 现在看来你似乎没有机制确保你没有同时重复的id。 这可以打破js
因此，请查看此内容，如果确实将元素首先存储在var中，则会删除原件，然后将其附加到新位置。