title: Where are scripts loaded after an ajax call?
body: <p>suppose you have a simple web page that dynamically loads content that looks like this:</p>
  
  <p><strong>- main.html -</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="https://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"
     src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
      $.ajax({
           type: 'get', cache: false, url: '/svc.html',
           success: function(h) {
               $('#main').html(h);
           }
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id='main'&gt;
      loading...
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and that the page it loads uses a little Javascript in a separate file:</p>
  
  <p><strong>- svc.html -</strong></p>
  
  <pre><code>&lt;script type="text/javascript"
     src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="/plugin.js" css="/plugin.css"&gt;&lt;/script&gt;
  &lt;div id='inner'&gt;
  dynamically loaded content
  &lt;/div&gt;
  </code></pre>
  
  <p>notice the <code>css</code> attribute on the script tag - it indicates a style-sheet that belongs to the script and which the script will load for us.  Here's the script:</p>
  
  <p><strong>- plugin.js -</strong></p>
  
  <pre><code>var css = $('&lt;link /&gt;', {
      rel: "stylesheet", type: "text/css", href: $('script:last').attr('css')
  });
  $('head').append(css);
  </code></pre>
  
  <p>and, finally, the style-sheet, which merely colours the <code>inner</code> div that gets loaded, as proof that it all works:</p>
  
  <p><strong>- plugin.css -</strong></p>
  
  <pre><code>#inner
  {
      border: solid 1px blue;
  }
  </code></pre>
  
  <p>now, you'll notice the way the style-sheet gets loaded: we look at <code>$('script')</code> and pick off the last one, then we grab the <code>css</code> attribute and attach a <code>link</code> item to the head of the document.</p>
  
  <p>I can visit <code>/svc.html</code> and the javascript runs, loads my style-sheet, all's cool - however, if I visit <code>/main.html</code>, the javascript runs but fails to find the loading of the <code>plugin.js</code> in the array of <code>$('script')</code> (and therefore fails to load the stylesheet).  Note that the plugin script does run, it just doesn't see itself.</p>
  
  <p>Is this a bug? a limitation of the jQuery AJAX method? shouldn't <code>$('script')</code> reflect <em>all</em> scripts that have been loaded?</p>
  
  <p><strong>* edit *</strong></p>
  
  <p>after much wailing and gnashing of teeth, I decided to go for Kevin B's solution, however, I can't get it to work, basically because the <code>plugin.js</code> code runs at the time the <code>scriptNode</code> gets inserted, but within the plugin code, the node has not yet been inserted and is thus not available in the <code>$('script')</code> array - so I'm still SOL.  I've put all the code for review here:</p>
  
  <p><a href="http://www.arix.com/tmp/loadWithJs/" rel="nofollow">http://www.arix.com/tmp/loadWithJs/</a></p>