title: Is it possible to dynamically load a script into a div that references local variables?
body: <p>Imagine the following two files:</p>
  
  <p><strong>test.html</strong></p>
  
  <pre><code>&lt;div id="stuff"&gt;&lt;/div&gt;
  &lt;button onclick="doStuff()"&gt;Magic&lt;/button&gt;
  &lt;script&gt;
  var foo = new function() {
      this.bar = function() {
          return "THE MAGIC!";
      };
  };
  
  function doStuff() {
      $('#stuff').load('stuffToDo.html');
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>stuffToDo.html</strong></p>
  
  <pre><code>&lt;div&gt;&lt;script&gt;document.write(foo.bar());&lt;/script&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I would like to insert the dynamic content from stuffToDo.html into the div in test.html. I've found that using jQuery.load() or jQuery.get() with subsequent $('#stuff').html(data) seems to cause the script to get executed before insertion and thus before it is in the scope of the foo singleton. Is there a better way to do this or at least a way to put the content into the div without executing or removing the script tags then running an eval on it?</p>