jQuery .load()/ .ajax()在追加后不在返回的HTML中执行javascript

Question

我已经尝试使用.load()并$.ajax获取一些需要附加到容器的HTML,但是当我将它附加到元素时,返回的HTML中的Javascript没有被执行.

使用.load():

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

我也试过切换到$ .ajax调用.然后我从返回的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();

});

理想情况下,我在附加HTML后在回调中运行此javascript,但变量被设置为从控制器返回的值.

总而言之,我试图获得一些HTML,其中包含需要在附加HTML后运行的JS,但我没有运气,.load()或者$.ajax()因为返回的HTML中的脚本在附加时消失,或者它根本不执行.

Answer 1

当load()与片段选择器一起使用时,在添加片段之前将删除脚本元素,因此脚本将不会被执行.

使用不带后缀选择器表达式的URL调用.load()时,在删除脚本之前将内容传递给.html().这将在丢弃之前执行脚本块.但是,如果使用附加到URL的选择器表达式调用.load(),则在更新DOM之前会删除脚本,因此不会执行脚本.两种情况的示例如下所示:

所以试试吧

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

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

演示:小提琴