移动包含动态创建的脚本标记的DOM元素

Question

我正在使用Fish Gadget（http://abowman.com/google-modules/fish/）在基于wiki的CMS中，并需要将小工具从一个HTML元素移动到另一个元素。 （注意：Fish Gadget只是一个示例 - 其他小工具也存在此问题。）

如果我直接使用小工具的基类“ig_reset”重新定位小工具，则一切正常。如果我尝试使用周围的包装器进行重定位，则小工具使用的iframe似乎会接管。不幸的是，我需要使用周围的包装器进行重新定位。

这似乎与在DOM中移动SCRIPT标记有关。小工具动态创建脚本和样式标记。如果我从DOM中删除动态创建的脚本标记，然后将包装器重新定位到DOM中的另一个位置，所有内容都可以正常工作。如果我尝试将脚本标记移动到另一个DOM元素，则会出现原始问题。因此，在DOM中移动脚本标记似乎是导致问题的原因 - 无论移动发生的时间如何（即使是在加载后）。

我想了解在这里导致帧接管页面的原因，并找到比删除动态创建的脚本标记更好的解决方案。

我在这里放了一个测试：http://solidgone.com/jquery/google-gadget.html - 演示使用jQuery，但我认为这与jQuery无关...

- DaveG

Answer 1

无论何时您使用jQuery将脚本元素附加到页面中，它都会尝试执行它。因此，当您移动 ig_reset（仅为表格 - 没有脚本）时，它可以正常工作。当您尝试移动包含脚本的包装器时，脚本会被移动并重新执行。我们正在努力修复jQuery核心中的这个重新执行问题，但目前就是这样。

- John Resig

---

大师！也许您可以回答这个关于您神奇的jQuery库的理论问题吗？链接 - gdoron

Answer 2

正如John Resig所指出的，这是一个jQuery问题。您可以通过替换处理程序来验证此问题

$("#with-wrapper").click(function () 
{
   $('.sidebar-content-wrapper').contents().appendTo($("#sidebar"));
});

使用另一种方法来避免使用jQuery方法来移动每个元素：

$("#with-wrapper").click(function() 
{
   var sidebar = $("#sidebar")[0];
   $('.sidebar-content-wrapper').contents().each(function()
   { 
      // raw DOM method rather than jQuery's 
      //  appendTo() -> domManip() -> execute script blocks behavior
      sidebar.appendChild(this);
   });
});

- Shog9

---

我看到它复制了DOM，而不是移动它。 - vsync

@vsync：你为什么这么说？ - Shog9

我看到它在复制元素（每次循环），但之后会发生什么？ 我希望能够杀死原始元素，不是吗？ - vsync

@vsync：这里没有进行任何元素复制。请参见：https://developer.mozilla.org/En/DOM/Node.appendChild - Shog9