我有两个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,浏览器必须查看Nodes并将它们序列化为一个字符串.然后当您将该HTML分配给文档的另一部分(使用innerHTML或jQuery html(…))时,您会告诉浏览器销毁先前在元素中的所有内容,并将HTML字符串解析成一个新的一组Node对象,并将这些新节点插入到元素中.
这是缓慢的,浪费的,并且丢失了无法在序列化HTML中表达的原始Node对象的任何方面,例如：
>事件处理程序函数/监听器(这就是为什么你的编辑打破)
>变量引用其他JavaScript代码已经到了Nodes(也打破了脚本)
>表单域值(除了部分地,在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);