Question

I’m not sure if this is a jQuery bug (using 1.7.1) or if its meant to be this way (I don’t understand why it would be like this, but whatever):

Try this jsfiddle out: http://jsfiddle.net/qFLpe/1/

Basically, I can create a block of HTML using JS, bind events to it, and then store that in a variable using var clones = $(elem).clone(true, true) for deep with events. At first glance, it acts as though it works fine. The elements with the bound events are wiped from the DOM, then restored from a variable. You can click them and they’ll run the bound event.

Update: it looks like it just loses the events the second time $.html(clones) is called, regardless of whether its an XHR or not…

BUT… once any AJAX request runs… the events are no longer bound? The HTML is still there, but not the events. I’m not too sure why?? It’s like the AJAX event is somehow resetting the cloned events that are stored in that variable… ?

Answer 1

Use $.live, works fine then.

I don’t think it’s related to the $.get; commenting it out produces the same not-workingness, with bind.

See the last comment on the clone doc page:

[…] but be aware that functions like .html() drop Data and Events from the nodes.

Not sure about the first html with the clones, though.