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)
Change History (6)
Changed August 29, 2008 05:42PM UTC by comment:1
Changed September 07, 2008 11:09PM UTC by 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 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 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 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 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: | new → closed |
This should be fixed in 1.3.2; please reopen with a test case if problems remain.
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.