How to properly clone (jQuery) an element that has style applied through PIE?

Question

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 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?

Cheers, peol

Answer 1

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

1. The VML elements that PIE has inserted will also be included in the cloned content, but they are cloned incorrectly with no namespace prefix for some reason, and
2. The unique _pieId attribute that PIE puts on each of its target elements is also copied in the clone, which leads to collisions between ids that are no longer unique.

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.

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;
}

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

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

Hope that works for you.