如何在不破坏javascript的情况下使用Jquery将html从一个div移动到另一个div [英] How do you move html from one div to another with Jquery without breaking javascript

问题描述

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

I have two divs for different sections of my webpage, a working and a reference section. One is fixed size, the other is variable sized and they are vertically stacked. I am trying to design it so that if you want to work on something in the reference pane, you click a link and it swaps all the data between the two panes. My idea was to do the following:

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

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

这个问题，似乎是这些窗格中引用的任何javascript（例如，转换时打破了。没有javascript错误发生，只是没有任何反应，例如javascript绑定被破坏。

The problem with this, is it seems that any javascript referenced inside of these panes (for example, in place editors) get broken upon switching. No javascript errors occur, it's just that nothing happens, like the javascript ties are broken.

是否有任何移动html而不破坏包含的javascript？

Is there any to move the html without breaking the javascript contained?

推荐答案

当您处理HTML文档的某些部分时，您应该使用 的Node对象浏览器看到的内容，而不是HTML字符串。

When you are working with bits of an HTML document, you should aim to work with the Node objects that are the content as the browser sees it, not HTML strings.

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

To get HTML the browser has to look at the Nodes and serialise them to a string. Then when you assign that HTML to another part of the document (with innerHTML or jQuery html(...)), you are telling the browser to destroy all the content that was previously in the element, laboriously parse the HTML string back into a new set of Node objects, and insert these new Nodes into the element.

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

This is slow, wasteful, and loses any aspect of the original Node objects that can't be expressed in serialised HTML, such as:

• 事件处理程序函数/监听器（这就是你的编辑器破坏的原因）


• 其他JavaScript代码对节点的变量引用（也打破了脚本）


• 表单字段值（由于某个错误，部分在IE中除外）


• 自定义属性

• event handler functions/listeners (which is why your editors are breaking)
• variable references other JavaScript code has to the Nodes (also breaks scripts)
• form field values (except, partially, in IE due to a bug)
• custom properties

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

So — and this applies whether you're using jQuery or the plain DOM — don't throw HTML around! Take the original node objects and insert them into the place you want them (they'll leave the place they originally were automatically). The references stay intact so scripts will keep working.

// 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);

这篇关于如何在不破坏javascript的情况下使用Jquery将html从一个div移动到另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！