From 7481a3645af63cef1406687190fd62bdfb1bf254 Mon Sep 17 00:00:00 2001 From: Colin Snover Date: Sun, 12 Dec 2010 02:20:31 -0600 Subject: [PATCH] Fix the clone method to be a little less insane in IE, which fixes the new event-cloning clone() as well as probably a bunch of IE-related clone bugs. --- src/manipulation.js | 54 ++++++++++++++++++++++----------------- test/unit/manipulation.js | 42 ++++++++++++++++++++++++------ 2 files changed, 64 insertions(+), 32 deletions(-) diff --git a/src/manipulation.js b/src/manipulation.js index c592b7a4..9b7cfefb 100644 --- a/src/manipulation.js +++ b/src/manipulation.js @@ -9,7 +9,6 @@ var rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g, rnocache = /<(?:script|object|embed|option|style)/i, // checked="checked" or checked (html5) rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i, - raction = /\=([^="'>\s]+\/)>/g, wrapMap = { option: [ 1, "" ], legend: [ 1, "
", "
" ], @@ -187,31 +186,38 @@ jQuery.fn.extend({ clone: function( events ) { // Do the clone var ret = this.map(function() { - if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) { - // IE copies events bound via attachEvent when - // using cloneNode. Calling detachEvent on the - // clone will also remove the events from the orignal - // In order to get around this, we use innerHTML. - // Unfortunately, this means some modifications to - // attributes in IE that are actually only stored - // as properties will not be copied (such as the - // the name attribute on an input). - var html = this.outerHTML, - ownerDocument = this.ownerDocument; + var clone = this.cloneNode(true); + if ( !jQuery.support.noCloneEvent && (this.nodeType === 1 || this.nodeType === 11) && !jQuery.isXMLDoc(this) ) { + // IE copies events bound via attachEvent when using cloneNode. + // Calling detachEvent on the clone will also remove the events + // from the original. In order to get around this, we use some + // proprietary methods to clear the events. Thanks to MooTools + // guys for this hotness. + var srcElements = jQuery(this).find('*').andSelf(); + jQuery(clone).find('*').andSelf().each(function (i, clone) { + // We do not need to do anything for non-Elements + if (this.nodeType !== 1) { + return; + } - if ( !html ) { - var div = ownerDocument.createElement("div"); - div.appendChild( this.cloneNode(true) ); - html = div.innerHTML; - } + // clearAttributes removes the attributes, but also + // removes the attachEvent events + clone.clearAttributes(); - return jQuery.clean([html.replace(rinlinejQuery, "") - // Handle the case in IE 8 where action=/test/> self-closes a tag - .replace(raction, '="$1">') - .replace(rleadingWhitespace, "")], ownerDocument)[0]; - } else { - return this.cloneNode(true); + // mergeAttributes only merges back on the original attributes, + // not the events + clone.mergeAttributes(srcElements[i]); + + // IE6-8 fail to clone children inside object elements that use + // the proprietary classid attribute value (rather than the type + // attribute) to identify the type of content to display + if (clone.nodeName.toLowerCase() === 'object') { + clone.outerHTML = srcElements[i].outerHTML; + } + }); } + + return clone; }); // Copy the events from the original to the clone @@ -375,7 +381,7 @@ function cloneCopyEvent(orig, ret) { var i = 0; ret.each(function() { - if ( this.nodeName !== (orig[i] && orig[i].nodeName) ) { + if ( this.nodeType !== 1 || this.nodeName !== (orig[i] && orig[i].nodeName) ) { return; } diff --git a/test/unit/manipulation.js b/test/unit/manipulation.js index 8ee36882..71a501ac 100644 --- a/test/unit/manipulation.js +++ b/test/unit/manipulation.js @@ -382,10 +382,24 @@ test("append(Function) with incoming value", function() { }); test("append the same fragment with events (Bug #6997, 5566)", function () { - expect(2); + expect(2 + (document.fireEvent ? 1 : 0)); stop(1000); - var element = jQuery("").click(function () { + var element; + + // This patch modified the way that cloning occurs in IE; we need to make sure that + // native event handlers on the original object don’t get disturbed when they are + // modified on the clone + if (!jQuery.support.noCloneEvent && document.fireEvent) { + element = jQuery("div:first").click(function () { + ok(true, "Event exists on original after being unbound on clone"); + jQuery(this).unbind('click'); + }); + element.clone(true).unbind('click')[0].fireEvent('onclick'); + element[0].fireEvent('onclick'); + } + + element = jQuery("").click(function () { ok(true, "Append second element events work"); }); @@ -834,7 +848,7 @@ test("replaceAll(String|Element|Array<Element>|jQuery)", function() { }); test("clone()", function() { - expect(31); + expect(35); equals( 'This is a normal link: Yahoo', jQuery('#en').text(), 'Assert text for #en' ); var clone = jQuery('#yahoo').clone(); equals( 'Try them out:Yahoo', jQuery('#first').append(clone).text(), 'Check for clone' ); @@ -848,7 +862,7 @@ test("clone()", function() { ]; for (var i = 0; i < cloneTags.length; i++) { var j = jQuery(cloneTags[i]); - equals( j[0].tagName, j.clone()[0].tagName, 'Clone a <' + cloneTags[i].substring(1)); + equals( j[0].tagName, j.clone()[0].tagName, 'Clone a ' + cloneTags[i]); } // using contents will get comments regular, text, and comment nodes @@ -874,11 +888,23 @@ test("clone()", function() { equals( div[0].nodeName.toUpperCase(), "DIV", "DIV element cloned" ); div.find("table:last").trigger("click"); - div = jQuery("
").html(' '); + // this is technically an invalid object, but because of the special + // classid instantiation it is the only kind that IE has trouble with, + // so let’s test with it too. + div = jQuery("
").html(' '); - div = div.clone(true); - equals( div.length, 1, "One element cloned" ); - equals( div[0].nodeName.toUpperCase(), "DIV", "DIV element cloned" ); + clone = div.clone(true); + equals( clone.length, 1, "One element cloned" ); + equals( clone.html(), div.html(), "Element contents cloned" ); + equals( clone[0].nodeName.toUpperCase(), "DIV", "DIV element cloned" ); + + // and here's a valid one. + div = jQuery("
").html(' '); + + clone = div.clone(true); + equals( clone.length, 1, "One element cloned" ); + equals( clone.html(), div.html(), "Element contents cloned" ); + equals( clone[0].nodeName.toUpperCase(), "DIV", "DIV element cloned" ); div = jQuery("
").data({ a: true, b: true }); div = div.clone(true);