Bug Tracker

Opened 11 years ago

Closed 10 years ago

#3302 closed bug (fixed)

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 (last modified by dmethvin)

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 11 years ago.
this shows the dom errors on a TABLE as i try to clone the rows
test2.html (1.6 KB) - added by mv987 11 years ago.
this shows the clone problems on divs

Download all attachments as: .zip

Change History (8)

Changed 11 years ago by mv987

Attachment: test.html added

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

Changed 11 years ago by mv987

Attachment: test2.html added

this shows the clone problems on divs

comment:1 Changed 11 years ago by mv987

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.

comment:2 Changed 11 years ago by susurrus

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

comment:3 Changed 11 years ago by susurrus

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

comment:4 Changed 11 years ago by susurrus

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.

comment:5 Changed 10 years ago by SineSwiper

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

comment:6 Changed 10 years ago by dmethvin

Description: modified (diff)
Resolution: fixed
Status: newclosed

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

Note: See TracTickets for help on using tickets.