I've tried using .load() and $.ajax 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.

Using .load():

$('#new_content').load(url+' #content > *',function() {

    alert('returned');

});

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 <script> to a DOM element like this is frowned upon?

Using $.ajax:

$.ajax({ url: url }).done(function(response) {

    var source  = $(<div>).html(response).find('#overview_script').html();

    var content = $(<div>).html(response).find('#content').html();



    $('#new_content').html(content);

    $('<script>').appendTo('#new_content').text(source).html();



});

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.

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 .load() or $.ajax() as the script in the returned HTML either disappears upon appending it, or it does not execute at all.