#921 closed bug (fixed)

Opened February 06, 2007 01:16PM UTC

Closed May 14, 2007 05:47PM UTC

IE Fires click event after doing a .clone()

Reported by:	elicochran@mac.com	Owned by:
Priority:	critical	Milestone:	1.1.3
Component:	event	Version:	1.1.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

Adding a function to a new "cloned" object causes function to fire in IE

There is an example at: http://aos.elicochran.com/

Example works fine in Firefox (on Mac and Windows), Safari, but on IE 6&7 instead of dimming the source row, the row is deleted.

The offending code is:

function addRowElement(row_obj) {

if ( $(row_obj).attr('class') != "dim" ) {

var newRow = $(row_obj).clone(true);

$(newRow).attr('name',$(row_obj).attr('id'));

$(newRow).attr('id','');

$(newRow).click( function() {

removeRowElement(this) ;

return false;

});

if ( $('#placeholder') ) $('#placeholder').remove() ;

$(newRow).appendTo('#bucket');

$(row_obj).addClass("dim");

}

scrollBottom();

setCounter();

}

Oddly enough when the same code is called from this loop, it works fine. (Try the Add All button in the example.)

function addAllRows() {

$('#fruit_list tr').each(function(count) {

addRowElement(this);

});

}

This may be related to the following thread on the forum: http://www.nabble.com/Bind-triggers-function-t3146103.html#a8721515

Attachments (3)

jquery.clone.diff (1.2 KB) - added by brandon May 14, 2007 05:39PM UTC.

This patch fixes it all.
jquery.diff (0.7 KB) - added by brandon April 04, 2007 02:44AM UTC.

Patch
test.html (1.5 KB) - added by brice March 02, 2007 12:53AM UTC.

IE Clone Test

Change History (14)

Changed February 07, 2007 05:01PM UTC by brandon comment:1

priority:	major → critical
summary:	Adding a function to a new "cloned" object causes function to fire in IE → IE Fires click event after doing a .clone()

I've created a simplified test case here:

http://brandon.jquery.com/testing/921/

This is related to #863

Changed February 23, 2007 04:49AM UTC by brandon comment:2

resolution:	→ fixed
status:	new → closed

This is not related to #863.

The issue was with the $events expando not being nulled out on the clone.

Fixed in Revision 1407.

Changed March 02, 2007 12:54AM UTC by brice comment:3

resolution:	fixed
status:	closed → reopened

IE $.clone() event is still prevalent.

In short: The scope of clones is the cloned element (donor), not the clone. Further, events attached to a "clone" are instantly fired, and events attached to the donor remain attached to the clone.

See: http://dev.iceburg.net/jquery/cloneTest.html (source will be attached to ensure availability)

~ Brice

Changed March 14, 2007 10:20AM UTC by edwin comment:4

Very nasty (and critical) bug.

My workaround:

Instead of:

myClonedElement.click(myHandler);

Do this:

myClonedElement.onclick = myHandler;

Ofcourse this doesn't work if you want to attach more handlers of the same type to the same element.

Changed March 14, 2007 10:25AM UTC by edwin comment:5

Correction:

My workaround:

Instead of:

myClonedElementJQueryObject.click(myHandler);

Do this:

myClonedElementJQueryObject.get(0).onclick = myHandler;

Changed March 25, 2007 02:49PM UTC by john comment:6

need:	→ Test Case

Changed April 04, 2007 12:13AM UTC by brandon comment:7

need:	Test Case → Patch

Replying to [comment:3 brice]:

Thanks for the great test case. I'm investigating this further.

Changed April 04, 2007 02:45AM UTC by brandon comment:8

need:	Patch → Commit

I believe this patch puts this nasty bug to rest. You can see the test with the patched jQuery here: http://brandon.jquery.com/testing/921/newTest.html

Changed April 05, 2007 02:00AM UTC by john comment:9

milestone:	→ 1.1.3
version:	→ 1.1.1

Does this only occur for child elements? or does it also occur for descendant elements as well?

a = a.cloneNode( deep != undefined ? deep : true );

// drop $events expando to avoid firing incorrect events in IE
jQuery(a).find("*").add(a).each(function(){
  this.$events = null;
});

Also, if this only occurs in IE, then we may want to add a conditional statement; but I suspect that this also occurs in Opera.

Changed April 10, 2007 12:49PM UTC by brandon comment:10

Replying to [comment:10 john]:

I believe that would be the best way to handle this and it is only happening in IE. This is because IE clones the event handlers along with the element.

Changed April 22, 2007 05:18AM UTC by brandon comment:11

need:	Commit → Patch

Since the switch to DOM Level 2 handlers, this patch/method no longer works.

Changed April 25, 2007 03:50AM UTC by brandon comment:12

Everything I've tried since moving to DOM Level 2 handlers is not working out very well. Anything you do to the parent is also done to the clone and anything you do clone is done to the parent. The only other way around this would be to actually implement a custom clone method for IE. A method that would document.createElement, copy the attributes and handle the children on deep clones. Messy but it seems that this will be the only way around this nasty bug.

Changed May 14, 2007 03:44PM UTC by brandon comment:13

description:	Adding a function to a new "cloned" object causes function to fire in IE\ \ There is an example at: http://aos.elicochran.com/ \ \ Example works fine in Firefox (on Mac and Windows), Safari, but on IE 6&7 instead of dimming the source row, the row is deleted. \ \ The offending code is: \ \ function addRowElement(row_obj) { \ if ( $(row_obj).attr('class') != "dim" ) { \ var newRow = $(row_obj).clone(true); \ $(newRow).attr('name',$(row_obj).attr('id')); \ $(newRow).attr('id',''); \ \ $(newRow).click( function() { \ removeRowElement(this) ; \ return false; \ }); \ if ( $('#placeholder') ) $('#placeholder').remove() ; \ \ $(newRow).appendTo('#bucket'); \ $(row_obj).addClass("dim"); \ } \ scrollBottom(); \ setCounter(); \ } \ \ \ Oddly enough when the same code is called from this loop, it works fine. (Try the Add All button in the example.) \ \ function addAllRows() { \ $('#fruit_list tr').each(function(count) { \ addRowElement(this); \ }); \ } \ \ This may be related to the following thread on the forum: http://www.nabble.com/Bind-triggers-function-t3146103.html#a8721515 → Adding a function to a new "cloned" object causes function to fire in IE \ \ There is an example at: http://aos.elicochran.com/ \ \ Example works fine in Firefox (on Mac and Windows), Safari, but on IE 6&7 instead of dimming the source row, the row is deleted. \ \ The offending code is: \ \ function addRowElement(row_obj) { \ if ( $(row_obj).attr('class') != "dim" ) { \ var newRow = $(row_obj).clone(true); \ $(newRow).attr('name',$(row_obj).attr('id')); \ $(newRow).attr('id',''); \ \ $(newRow).click( function() { \ removeRowElement(this) ; \ return false; \ }); \ if ( $('#placeholder') ) $('#placeholder').remove() ; \ \ $(newRow).appendTo('#bucket'); \ $(row_obj).addClass("dim"); \ } \ scrollBottom(); \ setCounter(); \ } \ \ \ Oddly enough when the same code is called from this loop, it works fine. (Try the Add All button in the example.) \ \ function addAllRows() { \ $('#fruit_list tr').each(function(count) { \ addRowElement(this); \ }); \ } \ \ This may be related to the following thread on the forum: http://www.nabble.com/Bind-triggers-function-t3146103.html#a8721515

description:

Adding a function to a new "cloned" object causes function to fire in IE\ \ There is an example at: http://aos.elicochran.com/ \ \ Example works fine in Firefox (on Mac and Windows), Safari, but on IE 6&7 instead of dimming the source row, the row is deleted. \ \ The offending code is: \ \ function addRowElement(row_obj) { \ if ( $(row_obj).attr('class') != "dim" ) { \ var newRow = $(row_obj).clone(true); \ $(newRow).attr('name',$(row_obj).attr('id')); \ $(newRow).attr('id',''); \ \ $(newRow).click( function() { \ removeRowElement(this) ; \ return false; \ }); \ if ( $('#placeholder') ) $('#placeholder').remove() ; \ \ $(newRow).appendTo('#bucket'); \ $(row_obj).addClass("dim"); \ } \ scrollBottom(); \ setCounter(); \ } \ \ \ Oddly enough when the same code is called from this loop, it works fine. (Try the Add All button in the example.) \ \ function addAllRows() { \ $('#fruit_list tr').each(function(count) { \ addRowElement(this); \ }); \ } \ \ This may be related to the following thread on the forum: http://www.nabble.com/Bind-triggers-function-t3146103.html#a8721515 → Adding a function to a new "cloned" object causes function to fire in IE \ \ There is an example at: http://aos.elicochran.com/ \ \ Example works fine in Firefox (on Mac and Windows), Safari, but on IE 6&7 instead of dimming the source row, the row is deleted. \ \ The offending code is: \ \ function addRowElement(row_obj) { \ if ( $(row_obj).attr('class') != "dim" ) { \ var newRow = $(row_obj).clone(true); \ $(newRow).attr('name',$(row_obj).attr('id')); \ $(newRow).attr('id',''); \ \ $(newRow).click( function() { \ removeRowElement(this) ; \ return false; \ }); \ if ( $('#placeholder') ) $('#placeholder').remove() ; \ \ $(newRow).appendTo('#bucket'); \ $(row_obj).addClass("dim"); \ } \ scrollBottom(); \ setCounter(); \ } \ \ \ Oddly enough when the same code is called from this loop, it works fine. (Try the Add All button in the example.) \ \ function addAllRows() { \ $('#fruit_list tr').each(function(count) { \ addRowElement(this); \ }); \ } \ \ This may be related to the following thread on the forum: http://www.nabble.com/Bind-triggers-function-t3146103.html#a8721515

Okay I've managed to fix this bug in its simplest form.

http://brandonaaron.net/jquery/tickets/921/test2.html

Changed May 14, 2007 05:47PM UTC by brandon comment:14

resolution:	→ fixed
status:	reopened → closed

This is now fixed in Rev [1906].

Side navigation