Skip to main content

Bug Tracker

Side navigation

#3302 closed bug (fixed)

Opened August 29, 2008 05:38PM UTC

Closed March 02, 2009 12:35AM UTC

DOM tree errors after multiple clones in IE

Reported by: mv987 Owned by:
Priority: major Milestone: 1.3
Component: core Version: 1.2.6
Keywords: clone ie Cc:
Blocked by: Blocking:
Description

In Internet Explorer:

After performing a clone of a clone of an element with children, there are errors in jQuery traversal.

see the attached files.

test.html has a table with a row with three cells.

test2.html has a div with three child divs.

in IE, on both of these pages, if you click 'Add Row' twice (thich clones the parent element), and then click 'click here' in the bottom row, it reports there are 2 children in the parent element.

The parent element obviously has three children. clicking 'click here' on the other two parent elements reports correctly.

as a side note, if you click 'add row' once, and then 'click here' on the new element, and then 'add row' again, the third element reports correctly in this case.

It seems like the cloned elements are not 'fresh' or something - as in the cached data is old and it is not rescanning?

i discovered this as I was trying to make a table of inputs that could be expanded. I also noticed that clone(true) was sometimes applying the event handlers to the wrong element in the cloned element. for example, the click handler was being put on the TD instead of the A inside that TD. Still trying to repro that consistently. It might be related to this.

Attachments (2)
  • test.html (1.6 KB) - added by mv987 August 29, 2008 05:38PM UTC.

    this shows the dom errors on a TABLE as i try to clone the rows

  • test2.html (1.6 KB) - added by mv987 August 29, 2008 05:39PM UTC.

    this shows the clone problems on divs

Change History (6)

Changed August 29, 2008 05:42PM UTC by mv987 comment:1

Also, if you add the two rows, and then click 'click here' on the third row, and then add another row, the fourth row reports correctly. however, if you just add three rows straightaway, the fourth row is wrong.

Changed September 07, 2008 11:09PM UTC by susurrus comment:2

I'm running into this same problem. Has anyone at least figured out a workaround in the meantime?

Changed September 07, 2008 11:10PM UTC by susurrus comment:3

Also, I get this problem on OL and UL when trying to add/remove LIs.

Changed September 07, 2008 11:26PM UTC by susurrus comment:4

Seems like a workaround is to use jQuery's clone() the first time and then use the native DOM cloneNode() for the remaining times. This does cause some form inputs to be misrendered (fixed when hovering over them), but the DOM weirdness afterwards doesn't seem to occur.

Changed January 12, 2009 04:27PM UTC by SineSwiper comment:5

Any new progress on this ticket? I'm having major problems with multi-group changes on cloned rows. For example, if I say "TD.admin BUTTON" and there's two BUTTONs there, IE will only select the first one. Doing something like "TD.admin BUTTON.delete, TD.admin BUTTON.insert" doesn't work, either. You actually have to do two separate commands, then IE will pick up on it. Here are some examples:

$trRow.find('TD.admindi BUTTON').removeAttr('disabled');
$trRow.find('TD.admindi BUTTON.insert').removeAttr('disabled'); // IE fix
//
$ei.parents('TD.end').andSelf().removeClass(classToggles).addClass('bad');
$ei.removeClass(classToggles).addClass('bad'); // IE fix
// 
// next example has two TD.times, one with a class of "start time",
// and another with "end time"
//
$row.find('TD.time INPUT').removeClass(classToggles).addClass(type);
$row.find('TD.end INPUT').removeClass(classToggles).addClass(type); // IE fix

Changed March 02, 2009 12:35AM UTC by dmethvin comment:6

description: \ In Internet Explorer: \ After performing a clone of a clone of an element with children, there are errors in jQuery traversal. \ \ see the attached files. \ test.html has a table with a row with three cells. \ test2.html has a div with three child divs. \ \ in IE, on both of these pages, if you click 'Add Row' twice (thich clones the parent element), and then click 'click here' in the bottom row, it reports there are 2 children in the parent element. \ \ The parent element obviously has three children. clicking 'click here' on the other two parent elements reports correctly. \ \ as a side note, if you click 'add row' once, and then 'click here' on the new element, and then 'add row' again, the third element reports correctly in this case. \ \ It seems like the cloned elements are not 'fresh' or something - as in the cached data is old and it is not rescanning? \ \ i discovered this as I was trying to make a table of inputs that could be expanded. I also noticed that clone(true) was sometimes applying the event handlers to the wrong element in the cloned element. for example, the click handler was being put on the TD instead of the A inside that TD. Still trying to repro that consistently. It might be related to this. \ In Internet Explorer: \ After performing a clone of a clone of an element with children, there are errors in jQuery traversal. \ \ see the attached files. \ test.html has a table with a row with three cells. \ test2.html has a div with three child divs. \ \ in IE, on both of these pages, if you click 'Add Row' twice (thich clones the parent element), and then click 'click here' in the bottom row, it reports there are 2 children in the parent element. \ \ The parent element obviously has three children. clicking 'click here' on the other two parent elements reports correctly. \ \ as a side note, if you click 'add row' once, and then 'click here' on the new element, and then 'add row' again, the third element reports correctly in this case. \ \ It seems like the cloned elements are not 'fresh' or something - as in the cached data is old and it is not rescanning? \ \ i discovered this as I was trying to make a table of inputs that could be expanded. I also noticed that clone(true) was sometimes applying the event handlers to the wrong element in the cloned element. for example, the click handler was being put on the TD instead of the A inside that TD. Still trying to repro that consistently. It might be related to this. \
resolution: → fixed
status: newclosed

This should be fixed in 1.3.2; please reopen with a test case if problems remain.