Question

I have a target div el with some components displayed. These components have some events attached (on mouse over, on click). I don’t control this code neither those events. They are just there. I’d like to render a widget inside this div. To do so I’m doing something like:

var save = el.innerHTML; 
el.innerHTML = "my widget code";

When my widget finishes its process I want to get back to the original content so I do:

el.innerHTML = save;

The components previously saved are correctly replaced but the events attached to them don’t work anymore.

I can’t hide, show divs. I need to replace the innerHTML to have the exact style and positioning.

What would you do in my case?
I’m using jQuery if it helps.

Thanks.

Answer 1

When you serialize DOM elements back to HTML, all the event handlers and bound data are lost.

If you have DOM, work with it, not with HTML:

var save = $(el).children().detach();
$(el).html(widgetHTML);

// later
$(el).empty().append(save);