JQuery.load()/.ajax() не выполняет javascript в возвращенном HTML после добавления

Я попытался использовать .load() и $.ajax, чтобы получить некоторый HTML, который нужно добавить в контейнер, но Javascript внутри возвращенного HTML не выполняется, когда я добавляю его к элементу.

Использование .load():

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

Я также попытался переключиться на вызов $.ajax. Затем я извлек script из возвращенного HTML, после которого я добавил его в контейнер, но та же проблема, JS не выполняется или даже не добавляется в этом случае, и, как я понимаю, пытается добавить <script> к элементу DOM, подобному этому, неодобрительно?

Использование $.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();

});

В идеале я буду запускать этот javascript в обратном вызове после добавления HTML-кода, но переменные устанавливаются в значения, возвращаемые с контроллера.

Итак, в общем, я пытаюсь получить некоторый HTML, который содержит JS, который должен быть запущен после того, как этот HTML был добавлен, но мне не удавалось использовать .load() или $.ajax() как script в возвращаемый HTML либо исчезает при добавлении его, либо вообще не выполняется.

Ответ 1

Когда load() используется с селектором фрагментов, элемент script будет удален до того, как будет добавлен фрагмент, тем самым script не будет выполнен..

При вызове .load() с использованием URL без суффикса выражение, содержимое передается в .html() до того, как скрипты будут удален. Это выполняет блоки script, прежде чем они будут отброшены. Если .load() вызывается с выражением выбора, добавленным к URL-адресу, однако, скрипты удаляются до обновления DOM, и, следовательно, не выполняются. Пример обоих случаев можно увидеть ниже:

Итак, попробуйте

$.get('partial.html', function(result){
    $result = $(result);

    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

Демо: Fiddle

Ответ 2

Если вы знаете, что script вы хотите выполнить, вы можете определить script где-то еще, вне ответа ajax, а затем вызвать его из обратного вызова. Поэтому вместо:

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

вы можете использовать

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

Ответ 3

Как насчет этого кода,

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

или вы можете просто переместить свой контент JavaScript для разделения файла и загрузить его с помощью

$.getScript("url to js file");

или просто используйте

eval(source);