Skip to main content

Bug Tracker

Side navigation

#10881 closed bug (invalid)

Opened November 24, 2011 03:46AM UTC

Closed November 24, 2011 08:50PM UTC

Cannot place $.clone'd element into DOM using $.html more than once

Reported by: benno_007 Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

If you store a cloned DOM element in a variable, you can only put it back in the DOM once, using $.html(). If you try to put it back in a second time, the events are lost

Test case: http://jsfiddle.net/benno_007/Pasge/.

Click the text to see the event, after 4 seconds it'll replace the content again. The events will be gone.

My question on SOF: http://stackoverflow.com/questions/8251060/clone-with-ajax-xhr-request-breaks-events/8251275#8251275

Scenario: Generate 'A' as a dynamic DOM element with bound events. Then you replace that with 'B' and generate similar to A but with different events targetting different elements. It then replaces B with A using $('body').html(clonesA). This works (events, content). Then we do $('body').html(clonesB). This works (events, content). Then we do $('body').html(clonesA) again, and the events have been lost but the content is still there.

Using this to generate banners on my site with actions, and trying to cache the elements and their events in variables, but can't because it doesn't work the second time around. Using $.live instead of bind works, but the events appear to apply to ALL banners.

Attachments (0)
Change History (1)

Changed November 24, 2011 08:50PM UTC by dmethvin comment:1

resolution: → invalid
status: newclosed

The cloned content is a set of DOM elements, right? Not a string? So there's problem one.

http://api.jquery.com/html/

When you replace the content, the original content (the copy) is removed from the document and its events/data obliterated to prevent memory leaks. As it must be. So there's problem two.