Moving a DOM element containing a dynamically created script tag

Question

I'm using the Fish Gadget (http://abowman.com/google-modules/fish/) within a wiki based CMS, and need to reposition the gadget from one HTML element to another. (Note: the fish gadget is an example -- the problem occurs with other gadgets as well.)

If I directly reposition the gadget using the gadgets base class "ig_reset", then everything works. If I try to reposition using a surrounding wrapper, then the iframe used by the gadget seems to take over. Unfortunately I need the flexibility of repositioning using the surrounding wrapper.

This seems to have something to do with moving a SCRIPT tag around in the DOM. The gadget dynamically creates a script and a style tag. If I remove the dynamically created script tag from the DOM, and then reposition the wrapper to another location in the DOM, all works well. If I try to move the script tag to another DOM element then the original problem occurs. So moving a script tag around the DOM seems to be the cause -- regardless of when the move occurs (even post-load).

I'd like to understand what is happening here to cause the frame to take over the page, and also find a better solution than removing the dynamically created script tag.

I put a test up here: http://solidgone.com/jquery/google-gadget.html -- the demo uses jQuery, but I don't think this is related to jQuery...

Answer 1

Whenever you append a script element into a page, using jQuery, it will attempt to execute it. Thus when you move ig_reset (which is only a table - no script) it works without issue. When you try to move the wrapper - which contains the script - the script is moved and re-executed.

We're working to fix this re-execution issue in jQuery core but for the time being that's what is going on here.