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

Posted 2023-05-08

【中文标题】如何正确克隆（jQuery）通过 PIE 应用样式的元素？

【英文标题】：How to properly clone (jQuery) an element that has style applied through PIE?

【发布时间】：2011-07-24 06:22:19

【问题描述】：

我在一个新项目（专门针对 IE8+）上成功使用了PIE 的.htc 版本，但是，我在尝试克隆应用了 PIE 样式的元素时遇到了问题.

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

感谢任何帮助。这可能是什么原因造成的，是否有潜在的解决方法？

干杯， 人

【问题讨论】：

我也遇到了同样的问题，请问您找到解决方案了吗？我已将 PIE 应用于未继承 .htc 修复的克隆元素的子元素 - 可能是使用 pie 的 javascript 版本可能是答案。

【参考方案1】：

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

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

因此，为了进行正确的克隆，我们需要摆脱两者。第一个可以通过临时将每个 PIE 元素的行为样式属性设置为“无”来完成，然后克隆并恢复它。将其设置为“无”会触发 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)

希望对你有用。

【讨论】：

很抱歉回复缓慢，我没有收到您回复的电子邮件，第二天我就冒险进行了一个新项目。 :) 感谢您的回复，我什至不记得我是如何解决它的，但我认为这是一种类似的方法。干杯！

这太棒了！非常感谢！