deac/jquery
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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.

Browse source
This commit is contained in:
Colin Snover 2010-12-12 02:20:31 -06:00
parent e4900df838
commit 7481a3645a
2 changed files with 64 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/manipulation.js
View file

@ -9,7 +9,6 @@ var rinlinejQuery = / jQuery\d+="(?:\d+|null)"/g,
rnocache = /<(?:script|object|embed|option|style)/i, rnocache = /<(?:script|object|embed|option|style)/i,
// checked="checked" or checked (html5) // checked="checked" or checked (html5)
rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i, rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
raction = /\=([^="'>\s]+\/)>/g,
wrapMap = { wrapMap = {
option: [ 1, "<select multiple='multiple'>", "</select>" ], option: [ 1, "<select multiple='multiple'>", "</select>" ],
legend: [ 1, "<fieldset>", "</fieldset>" ], legend: [ 1, "<fieldset>", "</fieldset>" ],
@ -187,31 +186,38 @@ jQuery.fn.extend({
clone: function( events ) { clone: function( events ) {
// Do the clone // Do the clone
var ret = this.map(function() { var ret = this.map(function() {
if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) { var clone = this.cloneNode(true);
// IE copies events bound via attachEvent when if ( !jQuery.support.noCloneEvent && (this.nodeType === 1 || this.nodeType === 11) && !jQuery.isXMLDoc(this) ) {
// using cloneNode. Calling detachEvent on the // IE copies events bound via attachEvent when using cloneNode.
// clone will also remove the events from the orignal // Calling detachEvent on the clone will also remove the events
// In order to get around this, we use innerHTML. // from the original. In order to get around this, we use some
// Unfortunately, this means some modifications to // proprietary methods to clear the events. Thanks to MooTools
// attributes in IE that are actually only stored // guys for this hotness.
// as properties will not be copied (such as the var srcElements = jQuery(this).find('*').andSelf();
// the name attribute on an input). jQuery(clone).find('*').andSelf().each(function (i, clone) {
var html = this.outerHTML, // We do not need to do anything for non-Elements
ownerDocument = this.ownerDocument; if (this.nodeType !== 1) {
return;
}
if ( !html ) { // clearAttributes removes the attributes, but also
var div = ownerDocument.createElement("div"); // removes the attachEvent events
div.appendChild( this.cloneNode(true) ); clone.clearAttributes();
html = div.innerHTML;
}
return jQuery.clean([html.replace(rinlinejQuery, "") // mergeAttributes only merges back on the original attributes,
// Handle the case in IE 8 where action=/test/> self-closes a tag // not the events
.replace(raction, '="$1">') clone.mergeAttributes(srcElements[i]);
.replace(rleadingWhitespace, "")], ownerDocument)[0];
} else { // IE6-8 fail to clone children inside object elements that use
return this.cloneNode(true); // 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 // Copy the events from the original to the clone
@ -375,7 +381,7 @@ function cloneCopyEvent(orig, ret) {
var i = 0; var i = 0;
ret.each(function() { ret.each(function() {
if ( this.nodeName !== (orig[i] && orig[i].nodeName) ) { if ( this.nodeType !== 1 || this.nodeName !== (orig[i] && orig[i].nodeName) ) {
return; return;
} }

42
test/unit/manipulation.js
View file

@ -382,10 +382,24 @@ test("append(Function) with incoming value", function() {
}); });
test("append the same fragment with events (Bug #6997, 5566)", function () { test("append the same fragment with events (Bug #6997, 5566)", function () {
expect(2); expect(2 + (document.fireEvent ? 1 : 0));
stop(1000); stop(1000);
var element = jQuery("<a class='test6997'></a>").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("<a class='test6997'></a>").click(function () {
ok(true, "Append second element events work"); ok(true, "Append second element events work");
}); });
@ -834,7 +848,7 @@ test("replaceAll(String|Element|Array&lt;Element&gt;|jQuery)", function() {
}); });
test("clone()", function() { test("clone()", function() {
expect(31); expect(35);
equals( 'This is a normal link: Yahoo', jQuery('#en').text(), 'Assert text for #en' ); equals( 'This is a normal link: Yahoo', jQuery('#en').text(), 'Assert text for #en' );
var clone = jQuery('#yahoo').clone(); var clone = jQuery('#yahoo').clone();
equals( 'Try them out:Yahoo', jQuery('#first').append(clone).text(), 'Check for 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++) { for (var i = 0; i < cloneTags.length; i++) {
var j = jQuery(cloneTags[i]); var j = jQuery(cloneTags[i]);
equals( j[0].tagName, j.clone()[0].tagName, 'Clone a &lt;' + 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 // 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" ); equals( div[0].nodeName.toUpperCase(), "DIV", "DIV element cloned" );
div.find("table:last").trigger("click"); div.find("table:last").trigger("click");
div = jQuery("<div/>").html('<object height="355" width="425"> <param name="movie" value="http://www.youtube.com/v/JikaHBDoV3k&amp;hl=en"> <param name="wmode" value="transparent"> </object>'); // 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("<div/>").html('<object height="355" width="425" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="movie" value="http://www.youtube.com/v/3KANI2dpXLw&amp;hl=en"> <param name="wmode" value="transparent"> </object>');
div = div.clone(true); clone = div.clone(true);
equals( div.length, 1, "One element cloned" ); equals( clone.length, 1, "One element cloned" );
equals( div[0].nodeName.toUpperCase(), "DIV", "DIV 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("<div/>").html('<object height="355" width="425" type="application/x-shockwave-flash" data="http://www.youtube.com/v/3KANI2dpXLw&amp;hl=en"> <param name="movie" value="http://www.youtube.com/v/3KANI2dpXLw&amp;hl=en"> <param name="wmode" value="transparent"> </object>');
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("<div/>").data({ a: true, b: true }); div = jQuery("<div/>").data({ a: true, b: true });
div = div.clone(true); div = div.clone(true);