How to copy everything in an html elements, text and style

Question

I have a jQuery page that I built. The crucial parts all lie within a div like so..

<div id="TestDiv"></div>
<div id="randomDialogName"></div>
<div id="randomDialogName"></div>
<div id="randomDialogName"></div>
<div id="randomDialogName"></div>
</body>

within the TestDive there can be lots of elements, charts, grids, live handlers and etc. (Mostly jQueryUI Elements)

What I would like to do is select everything within "TestDiv" copy it to a variable as a temporary measure then when I load the data back into TestDiv, I would like to reload everything the way it was. Like so.

function saveDivElements(){
    var saveId = $('#TestDiv').attr('tab');
    var html = $('#TestDiv').html(); //have tried clone(true) and other methods here
    console.log(html);
    setLoaded(saveId, true, html); //saves to divData member variable on page
}

$("#TestDiv").html(divData); // called later and loads data

What I have currently, saves the elements, but there is no class information or handlers that are saved. So on reload the elements are there, but nothing else remains. I need something where I don't have to reload all the handlers, reset all the buttons. (Also this runs locally, performance is not an issue)

Answer 1

Can you utilize .detach() instead of extracting the raw HTML?

var savedChildren = $('#TestDiv').children().detach();

It takes along with it anything that you have bound to the elements. Here is a basic example in jsfiddle .