Bug Tracker

Ticket #10881 (closed bug: invalid)

Opened 3 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 3 years ago by dmethvin

  • Status changed from new to closed
  • Resolution set to invalid

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.

Note: See TracTickets for help on using tickets.