如何正确克隆（jQuery）通过PIE应用了样式的元素？ [英] How to properly clone (jQuery) an element that has style applied through PIE?

问题描述

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

I have been using the .htc version of PIE successfully on a new project (that will specifically target IE8+), however, I'm having trouble when trying to clone an element that has PIE-style applied to it.

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

I got a jsfiddle illustrating the problem here, and input is welcome (even other, similar approaches/alternatives to PIE) - however, .htc files cannot be referenced cross-domain, so this fiddle just contains the actual markup and CSS I use.

感谢任何帮助。可能导致这种情况的原因是，是否存在潜在的解决方法？

Any help is appreciated. What could be causing this, is there a potential workaround?

干杯，
peol

Cheers, peol

推荐答案

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

There are two issues that are encountered when cloning elements with PIE'd descendants:

1. VML元素已插入的PIE也将包含在克隆的内容中，但由于某种原因它们被错误地克隆而没有名称空间前缀，并且


2. PIE在其每个目标上放置的唯一_pieId属性元素也会复制到克隆中，这会导致不再唯一的ID之间的冲突。

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

So in order to do a proper clone, we need to get rid of both. The first can be done by temporarily setting the behavior style property of each PIE'd element to 'none' while cloning and restoring it afterward. Setting it to 'none' triggers PIE's cleanup methods which remove all the VML elements. The second item has to be done manually, as PIE does not remove the _pieId attributes automatically. Both of these are easy enough to script.

这是一个自定义的jQuery扩展，在我的有限测试中处理这个：

Here is a custom jQuery extension that handles this in my limited testing:

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方法：

You then would call the cloneWithPIE method just like you would call the normal clone method:

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

希望对你有用。

这篇关于如何正确克隆（jQuery）通过PIE应用了样式的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！