我正在尝试使用 jQuery 1.8.1 克隆一个 HTML5 元素，但是 this example jsbin在 IE<9 上失败(元素未被克隆)
代码(简化)
<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 的错误还是我在代码中遗漏了什么？
因为我也在克隆与节点关联的事件，我可以使用哪种优雅的替代方法来在 IE<9 上重现
clone()的相同行为？
到目前为止，我发现的唯一解决方法是通过 html() 复制所有节点，通过 append() 附加它们并利用与这些节点关联的事件的事件委托(delegate)，就像这样
$('body').on('click', 'section', function() {
alert('hey, I am a section');
});
但我对不同的想法持开放态度:我可以使用更优雅/性能/更简单/更快的方法吗？
谢谢。
最佳答案
我想在所有评论之后，我不妨添加这个作为答案:问题似乎是您需要一个 html5 垫片(如 html5shiv )，并且需要在您的 HTML5 元素出现之前加载它(以免解析器混淆)。 defer attributes JSBin automatically adds打破这种行为。
如果没有垫片，元件就会 splinter 。 DOM 最终看起来像这样:
<section/>
My section
</section/>
(如在 IE8 开发工具中所见——您至少要佩服这里发挥作用的解释的创造力)
这会破坏所有相关的选择器(这就是为什么您发布的 JSBin item 中的文本不是绿色的原因)。所有其他调用(插入、附加等)仍在工作的原因是您提供的 html 是相同的(并且会以相同的方式被错误解析)。
解决方案是强制 shim 在您的元素出现之前完全加载，如 jsFiddle counterexample 中所示我发布了。
希望这能解决您的问题。我提交了 JSBin issue regarding the problems caused by the defer attributes .
更新:这应该在 jsbin 中得到修复。
关于javascript - 在 IE8 上使用 jQuery 克隆 HTML5 元素和事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12351271/