在 IE8 上使用 jQuery 克隆 HTML5 元素和事件答案

【问题标题】：Cloning HTML5 elements and events with jQuery on IE8在 IE8 上使用 jQuery 克隆 HTML5 元素和事件
【发布时间】：2012-09-10 12:01:33
【问题描述】：

我正在尝试使用 jQuery 1.8.1 克隆 HTML5 元素，但 this example jsbin 在 IE

代码（简化）

<head>
  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

  <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

  <section>My section</section>
  <button>Clone section</button>
  ...

  <script>
  var section = $('section');
  $('button').on('click', function() {
    var clone = section.clone(true);
    $(clone).insertAfter($('section:last'));
  }); 

  $('section').on('click', function() {
     alert('hey, I am a section');
  }); 
  </script>

</body>

当然，这是一个简化的演示。在我的真实代码中，我有许多带有多个事件的嵌套元素：

我的问题

这是 jQuery 的错误还是我的代码中遗漏了什么？
因为我还克隆了与节点关联的事件，我可以使用哪种优雅的替代方法在 IEclone() 的相同行为？

到目前为止，我发现的唯一解决方法是通过 html() 复制所有节点，通过 append() 附加它们并利用 事件委托 重构与这些节点相关的事件的代码节点，像这样

  $('body').on('click', 'section', function() {
     alert('hey, I am a section');
  });

但我对不同的想法持开放态度：我可以使用更优雅/性能/更简单/更快的方法吗？

谢谢。

【问题讨论】：

嘿，fabrizio，我不知道这是否是我的实际问题，但我的几个同事刚刚遇到了 1.8.1 running document 的一些问题。在文档实际准备好之前准备好导致脚本无法运行。这是一个已知问题，jquery 的网站上有一篇关于它的帖子（对不起，我丢失了链接）。可能有一些使用延迟或类似方法来帮助您测试的解决方法。我祝你好运:)
嗨 Zachary，我认为这与特定的 jQuery 版本无关……该代码在 jQuery 1.7.2 上也不起作用
@ZacharyKniebel DOM Ready 处理程序的问题出现在 IE9/10 的 1.8 中，你的意思是 1.8.1 有更严重的问题吗？
（旁注：我现在在移动设备上，这就是为什么我不能玩你的代码）...是的，我 1.8.1 有很大的问题...它实际上导致我们的一个脚本炸毁，因此也炸毁了其余的脚本。也许是文章。我看到的是 1.8.. 我没有在 jquery 的网站上发布它，因为我认为这篇文章是 1.8.1
@FabrizioCalderan 有趣的东西。 JSBin 似乎为所有脚本添加了延迟属性，这会弄乱解析。这是一个等效的 jsfiddle，它工作正常：jsfiddle.net/Hhxsg

标签： javascript jquery html internet-explorer

【解决方案1】：

我想在所有 cmets 之后，我不妨添加这个作为答案：问题似乎是您需要一个 html5 垫片（如 html5shiv），并且需要在您的 HTML5 元素出现之前加载它（以免解析器感到困惑）。 defer attributes JSBin automatically adds 打破了这种行为。

没有垫片，元素就会被分解。 DOM 最终看起来像这样：

<section/>
My section
</section/>

（正如在 IE8 开发工具中看到的那样——您至少必须佩服这里的解释创造力）

这会破坏所有相关的选择器（因此为什么您发布的 JSBin item 中的文本不是绿色的）。所有其他调用（插入、追加等）仍在工作的原因是您提供的 html 是相同的（并且会以相同的方式被错误解析）。

解决方案是在您的元素出现之前强制填充程序完全加载，如我发布的jsFiddle counterexample 所示。

希望这能解决您的问题。我提交了JSBin issue regarding the problems caused by the defer attributes。

更新：现在应该在 jsbin 中修复此问题。

【讨论】：

【解决方案2】：

您好，我认为问题确实出在<section>，IE8 无法理解，我已经尝试克隆按钮并且代码运行顺利:-)

我已尝试更改您的 JavaScript 以使其在 IE9 上运行：（不适用于

<script>
  var section = $('section');
  $('button').on('click', function() {
    var clone = section.clone(true);
    $(clone).insertBefore($('section:last'));  //CHANGE From insertAfter to InsertBefore
  }); 

  $('section').on('click', function() {
     alert('hey, I am a section');
  }); 
  </script>

现在它看起来适用于 IE9 和其他浏览器。

或者如果您特别关注放置新的克隆脚本将更改如下：

var section = $('section');
var button = $('button')
$('button').on('click', function() {
    var clone = section.clone(true);
    console.log(clone);
  $(clone).insertBefore($('button'));
}); 
$('section').on('click', function() {
  alert('hey, I am a section');
});

【讨论】：

问题出在IE8及以下。