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

Question

我在基于 wiki 的 CMS 中使用 Fish Gadget (http://abowman.com/google-modules/fish/)，并且需要将小工具从一个 HTML 元素重新定位到另一个。 （注意：fish 小工具是一个示例——其他小工具也会出现问题。）

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

这似乎与在 DOM 中移动 SCRIPT 标签有关。小工具动态创建脚本和样式标记。如果我 remove 从 DOM 中动态创建的脚本标记，然后将包装器重新定位到 DOM 中的另一个位置，则一切正常。如果我尝试将脚本标记 move 到另一个 DOM 元素，则会出现原始问题。所以 moving DOM 周围的脚本标签似乎是原因——无论何时发生移动（甚至是加载后）。

我想了解这里发生了什么导致框架接管页面，并找到比删除动态创建的脚本标签更好的解决方案。

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

Answer 1

每当您使用 jQuery 将脚本元素附加到页面中时，它都会尝试执行它。因此，当您移动 ig_reset （这只是一个表 - 没有脚本）时，它可以正常工作。当您尝试移动包含脚本的包装器时，脚本会被移动并重新执行。

我们正在努力解决 jQuery 核心中的这个重新执行问题，但目前这就是这里发生的事情。

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