Question

Yes I have see the post here

And I tried that but the problem is, my jquery object looks more like this:

var $foo = $('<ul><li id="' + line.id + '" label="' + label + '" rel="file"><a href="#">' + line.title + '</a></li></ul>');
$foo.click(function() { openLink(line.url) });
$foo.appendTo($myDiv);

When $myDiv is fully populated I can do this:

var html = $('<div>').append($('#foo').clone()).remove().html();

And I will see all of the lovely HTML, but I don’t know if the click stuff will be preserved. See, I want to save the entire DOM modification to localStorage so I can retrieve it quickly since it’s pretty static. I need to be able to store it and all its attributes, then yank it back out and restore it, clicks and all.

Does that make sense?

Answer 1

The only way to do this would be to use inline event handlers, which is a bad (and slow) idea.

Instead, you can convert all of your event handlers to live handlers; they will then automatically apply to all matching elements without having to rebind them after changing the DOM.