title: jQuery .load() / .ajax() not executing javascript in returned HTML after appended
body: <p>I've tried using <code>.load()</code> and <code>$.ajax</code> to get some HTML that needs to be appended to a container, but the Javascript within the returned HTML is not being executed when I append it to an element.</p>
  
  <p>Using <code>.load()</code>:</p>
  
  <pre><code>$('#new_content').load(url+' #content &gt; *',function() {
      alert('returned');
  });
  </code></pre>
  
  <p>I've also tried switching to a $.ajax call. I then extracted the script from the returned HTML after which I appended it to the container, but same problem, the JS isn't being executed or even appended in this case, and as I understand it, trying to append a <code>&lt;script&gt;</code> to a DOM element like this is frowned upon?</p>
  
  <p>Using <code>$.ajax</code>:</p>
  
  <pre><code>$.ajax({ url: url }).done(function(response) {
      var source  = $("&lt;div&gt;").html(response).find('#overview_script').html();
      var content = $("&lt;div&gt;").html(response).find('#content').html();
  
      $('#new_content').html(content);
      $('&lt;script&gt;').appendTo('#new_content').text(source).html();
  
  });
  </code></pre>
  
  <p>Ideally I would run this javascript in a callback after I have appended the HTML, but variables are being set to values that are returned from a controller.</p>
  
  <p>So in summary, I am trying to get some HTML which contains JS that needs to be run after that HTML has been appended, but I have had no luck using <code>.load()</code> or <code>$.ajax()</code> as the script in the returned HTML either disappears upon appending it, or it does not execute at all.</p>