How to move an element around DOM tree without affecting related javascript?

Question

In this case I have a containing an iFrame that has an editor, mooEditable. I clone the element with IDs, destroy old one and insert new one where needed.

Javascript component doesn't work anymore at this stage. If there is a generic way to do this, it would be terrific if you share it.

TIA

Answer 1

Perhaps you could show the gist of what you do? Specifically, what do you mean by "destroy old one"?

This uses jQuery, but you could code to the bare metal if you want:

var item = $('#item-id');  // item to move
var want = $('#new-div');  // container to receive it
item.remove();
want.append(item);

You may have trouble moving iframes (not sure). If so, and if you're just swapping two items, move the other one.

Answer 2

You're losing the events and behaviors associated with the elements. Try using the .clone method if you're not already. Read the documentation for it and be aware of the cloneEvents() function and the keepid parameter.

var myOrigEditor = $('myEditor');

//clone the element and its events
var myClonedEditor = myOrigEditor.clone(true, true).cloneEvents(myOrigEditor); 

// We're copying IDs as well, so remove the old one from the DOM first to
// remove any possibility of confusion.
myOrigEditor.remove();

// Put the cloned object where you want.
$('location').append(myClonedEditor);

Answer 3

i would think the correct way to move an item in mootools is this:

$("newparent").adopt($("movingThis"));

otherwise, any events etc may not work. you can also use cloneEvents() if you have to save/reapply them, but should not have to. also, this is the only way that is guaranteed to keep all relations between the element and other javascript, as well as retain any element storage you may have had.

regards, coda