如何正确克隆（jQuery）通过 PIE 应用样式的元素？

Question

我一直在一个新项目（专门针对IE8+），但是，在尝试克隆应用了 PIE 样式的元素时遇到了麻烦。

我在 此处 找到了一个 jsfiddle 来说明问题，欢迎输入（甚至是其他类似的 PIE 方法/替代方案） - 但是，.htc 文件不能跨域引用，因此这个小提琴仅包含我使用的实际标记和 CSS。

任何帮助表示赞赏。可能是什么原因造成的，是否有潜在的解决方法？

干杯， 人民

Answer 1

克隆具有 PIE 后代的元素时会遇到两个问题：

1. PIE 插入的 VML 元素也将包含在克隆内容中，但由于某种原因，它们被错误地克隆，没有命名空间前缀，以及
2. 唯一的 _pieId 属性PIE 在其每个目标元素上放置的内容也会复制到克隆中，这会导致不再唯一的 id 之间发生冲突。

因此，为了进行正确的克隆，我们需要摆脱两者。第一个可以通过暂时将每个 PIE 元素的行为样式属性设置为“无”来完成，然后克隆并恢复它。将其设置为“none”会触发 PIE 的清理方法，该方法会删除所有 VML 元素。第二项必须手动完成，因为 PIE 不会自动删除 _pieId 属性。这两个脚本都很容易编写。

下面是一个自定义 jQuery 扩展，它在我有限的测试中处理此问题：

jQuery.fn.cloneWithPIE = function(dataAndEvents, deepDataAndEvents) {
    // Find elements with PIE attached and remove their behaviors:
    var pied = this.find('[_pieId]').css('behavior', 'none');

    // Perform the clone:
    var clone = this.clone(dataAndEvents, deepDataAndEvents);

    // Remove the _pieId from each of the original and cloned 
    // elements, and restore the behavior:
    pied.add(clone.find('[_pieId]')).removeAttr('_pieId').css('behavior', '');

    return clone;
}

然后，您将调用 cloneWithPIE 方法，就像调用普通的克隆方法一样：

$('.someEl').cloneWithPIE().appendTo(newParent)

希望这对您有用。