如何在不破坏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字符串.

要获取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);