How do I copy elements that include <script> children from an AJAX-loaded document?
<p>I'm currently trying to hack a kind of edit-in-place functionality into the <a href="http://www.atlassian.com/jira/" rel="nofollow">JIRA bugtracker</a> without changing its page templates. So, on the detail page for an issue, I'm attaching dblclick events to fields that replace the static field with an editable form element (from the edit page, which has been ajax-loaded and cached at the beginning of the script). Some of these elements are JS widgets, such as a calendar widget, and they have &lt;script&gt; elements within the &lt;td&gt; for the field. I want to carry these  elements across with the rest of the HTML, and have them executed in the page.</p>

<p>So, the original static field looks like this:</p>

<pre><code>&lt;td bgcolor="#ffffff" width="80%"&gt; 2008/Sep/22 &lt;/td&gt;
</code></pre>

<p>The one I'm trying to copy across looks like this:</p>

<pre><code>&lt;td class="fieldValueArea"&gt;

&lt;input type="text" name="duedate" id="duedate" value="" size="10"&gt;
    &lt;img id="duedate_trigger_c" src="/jira/images/icons/cal.gif" width="16" height="16" border="0" alt="Select a date" title="Select a date"&gt;

&lt;script type="text/javascript"&gt;
    Calendar.setup({
        firstDay    : 0,              // first day of the week
        inputField  : "duedate",  // id of the input field
        button      : "duedate_trigger_c", // trigger for the calendar (button ID)
        align       : "Tl",           // alignment (defaults to "Bl")
        singleClick : true,
        ifFormat    : "%e/%b/%y"      // our date only format
    });
&lt;/script&gt;

&lt;/td&gt;
</code></pre>

<p>I want to keep the &lt;script&gt; element and have it execute in the target page (after the copy) so that the Calendar widget inits properly.</p>

<p>I'm using jQuery to AJAX-load the edit page like so:</p>

<pre><code>    $.get(editlink, function(data){
        jeip_editpage = data;
    }, "text");
</code></pre>

<p>And replacing the field like so:</p>

<pre><code>this.innerHTML = $("#"+fieldname+"FieldArea .fieldValueArea",jeip_editpage).html();
</code></pre>

<p>(where this = the field TD)</p>

<p>After the $.get(), jeip_editpage contains the &lt;script&gt; element in the right place, but when I try and grab the element as above, it's gone. I've done some Googling and found that jQuery moves &lt;script&gt; elements around in the page during the parsing stage, which is a right pain. I suppose I could do a search &amp; grab &amp; replace on the text right after the $.get() to make sure I have all the &lt;script&gt; elements separately, but I figure there has to be an easier way, right?</p>

<p><strong>Note</strong> that I'm not changing any of JIRA's page templates, so answers involving the HTML coming back in a more useful layout aren't going to work for me.</p>
