clone()d object persistence
Hello,
I am curious about the lifetime of, say a clone()d <div>.
Just playing around, watching my DOM with Firebug, I see a cloned <div> disappear when I hide() it. Is this normal?
In this case, this is exactly what I want (for it to get destroyed), but say if I wanted the clone to remain persistent, but I did want to hide() it temporarily? Is there a way to keep it around?
What's more confusing to me is if I create more than one clone asynchronously (when an .ajax() call is made) and hide() each one after I'm done with it, the right ones seem to get hidden/destroyed.... this is great, but I cannot understand WHY, especially because the clones are created based on an id selector ("#mydiv").
To be more specific, say I have this:
var some_selector = 'xxx'; // this value is actually dynamic; passed as an argument
$.ajax({
beforeSend: function(request) {
show_clone(some_selector);
},
complete: function(status, request) {
hide_clone(some_selector);
},
})
function show_clone(some_selector) {
$('#mydiv').clone().appendTo(some_selector).show();
}
function hide_clone() {
$('#mydiv').hide();
}
So:
If more than one ajax call is invoked and multiple clones are added to the page, they are destroyed when hidden (why are they removed from the DOM when hidden?), and in fact, the correct one is always destroyed, even if it was (or was not) the most recently created one (why in the world is that? I was under the impression that using like-named ids as selectors is not good practice... why does this work so well? (cross-browser, even!?)).