Question

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

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

这似乎与在DOM中移动SCRIPT标记有关。小工具动态创建脚本和样式标记。如果我从DOM中删除动态创建的脚本标记，然后将包装器重新定位到DOM中的另一个位置，则一切正常。如果我尝试将脚本标记移动到另一个DOM元素，则会出现原始问题。所以在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);
   });
});

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

2 个答案: