jQuery appendTo() 在 IE7 中没有触发答案

【问题标题】：jQuery appendTo() not firing in IE7jQuery appendTo() 在 IE7 中没有触发
【发布时间】：2011-11-22 20:56:01
【问题描述】：

我正在移动一些文件准备好的东西。把它想象成一个花哨的标签导航，我在列表导航中有一些动态内容，可以在不同的面板之间切换。

我确实可以控制标记，但是 ul 在 CMS 中的模板与用于插入动态内容的模板不同，因此我基本上是在文档上移动内容以将其放在我想要的位置。它工作得很好，除了在 IE7 中，移动永远不会发生。

HTML：

<ul class="pnlHandler"></ul>

<div id="Panels">
   <li>Here goes the content that I want to move</li>
   <div class="pnlFront">
      This has more content, but it's already where I want it
   </div>
</div>

JS：

$(document).ready(function(){
   $("#Panels").children("li").appendTo(".pnlHandler");
});

【问题讨论】：

您可能必须先将它们从 DOM 中删除，然后再将它们附加回 .pnlHandler?不过我还没有测试过......
IE 不喜欢在<ul> 之外拥有<li>。所以，我的猜测是 <li> 从来没有被放入 DOM 中，试着把它放在 <ul> 里面 #panels 中。此外，您的选择器应为 $("#panels")（小写“p”）。
@Rocket：li 确实渲染了，但它的行为似乎很奇怪。如果我检查它，它认为下一个 div 是一个子元素（好像 li 从未关闭过），即使 HTML 是有效的。另外，#Panel 的 ID 在我的版本中是正确的，我只是在这里输入错误。 :)

标签： jquery internet-explorer-7 document-ready appendto

【解决方案1】：

IE 讨厌将<li> 放在<ul> 之外。您需要将它放在 <ul> 中才能在 IE 中运行。

<ul class="pnlHandler"></ul>

<div id="panels">
   <ul class="dummy">
     <li>Here goes the content that I want to move</li>
   </ul>
   <div class="pnlFront">
      This has more content, but it's already where I want it
   </div>
</div>

然后在你的 JavaScript 中：

$(document).ready(function(){
   $("ul.dummy", "#panels").children("li").appendTo(".pnlHandler");
   $("ul.dummy", "#panels").remove();
});

【讨论】：

你是对的。将 li 包裹在一个临时的 ul 中就可以了。有点道理，想想就明白了。干杯。