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

How do you move html from one div to another with Jquery without breaking javascript

提问by KallDrexx

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:

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

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

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

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.

问题在于，这些窗格（例如，就地编辑器）中引用的任何 javascript 似乎在切换时都被破坏了。没有发生 javascript 错误，只是没有发生任何事情，就像 javascript 关系被打破。

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

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

回答by bobince

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

当您处理 HTML 文档的一部分时，您应该致力于处理作为浏览器看到的内容的 Node 对象，而不是 HTML 字符串。

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 innerHTMLor 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，浏览器必须查看节点并将它们序列化为字符串。然后，当您将该 HTML 分配给文档的另一部分（使用innerHTML或 jQuery html(...)）时，您是在告诉浏览器销毁元素中先前存在的所有内容，费力地将 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:

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

• 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

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

So?—?and this applies whether you're using jQuery orthe 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.

所以？—？无论您使用 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);

回答by Ali Habibzadeh

This could be happening maybe as a result of duplicate ids. basically you may have element a in a div which has the id=id1 now this gets stored in a var and gets injected into a new div. now currently seems you have no mechanism for making sure you do not have duplicate ids at the same time. this can break js

这可能是由于重复的 ID 造成的。基本上你可能在一个 id=id1 的 div 中有元素 a 现在它被存储在一个 var 中并被注入到一个新的 div 中。现在似乎您没有确保同时没有重复 ID 的机制。这会破坏 js

So look into this and if you do make sure elements are first stored in a var then the originals are removed and then appended into a new location.

所以看看这个，如果你确实确保元素首先存储在 var 中，那么原始元素将被删除，然后附加到一个新位置。