IE Fires click event after doing a .clone()

[[email protected]…]

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

[brandon]

I've created a simplified test case here: ​http://brandon.jquery.com/testing/921/

This is related to #863

[brandon]

This is not related to #863.

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

Fixed in ​Revision 1407.

[brice]

IE Clone Test

[brice]

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

[edwin]

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.

[edwin]

Correction:

My workaround:

Instead of:

myClonedElementJQueryObject.click(myHandler);

Do this:

myClonedElementJQueryObject.get(0).onclick = myHandler;

[brandon]

Replying to brice:

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

[brandon]

Patch

[brandon]

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

[john]

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.

[brandon]

Replying to 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.

[brandon]

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

[brandon]

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.

[brandon]

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

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

[brandon]

This patch fixes it all.

[brandon]

This is now fixed in Rev [1906].