How do I ensure AJAX still works after content moved from iFrame through DOM manipulation

Question

After submitting an iFrame, content with AJAX enabled functions is returned and everything works.

Once I move the content out from the iFrame to the main page through DOM manipulation and remove the iFrame, AJAX stops working.

How can I make it work?

I grab the body content of the iFrame and move it to an outside element through .innerHTML

Answer 1

It really depends on the AJAX implementation...

Once you've grabbed the DOM nodes from the iFrame and placed them in your < body >, they are essentially new DOM nodes. Any events attached to them would need to be rebound and any code interacting with them would need to be re-executed.

Why not simply load the iFrame into the main page's DOM to begin with and execute the AJAX code there?