如何正确克隆(jQuery)通过PIE应用了样式的元素？

Question

我一直在一个新项目上成功使用PIE.htc版本(专门针对IE8 +),但是,当我尝试克隆一个应用了PIE风格的元素时,我遇到了麻烦.

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

任何帮助表示赞赏.可能导致这种情况的原因是,是否存在潜在的解决方法？

干杯,peol

Answer 1

使用PIE'd后代克隆元素时遇到两个问题:

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

所以为了做一个合适的克隆,我们需要摆脱两者.第一个可以通过临时将每个PIE'd元素的行为样式属性设置为'none'来完成,同时克隆并恢复它.将其设置为"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)

希望对你有用.