小编典典

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

ajax

我尝试使用.load()$.ajax获取一些需要附加到容器的HTML,但是当我将其附加到元素时,返回的HTML中的Javascript不会被执行。

使用.load()

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

我也尝试过切换到$
.ajax呼叫。然后,我从返回的HTML中提取了脚本,然后将其附加到容器中,但是同样的问题,在这种情况下,JS没有被执行,甚至没有附加,据我所知,试图将a附加<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包含JS说的是HTML已经被附加后运行的需要,但我一直在使用没有运气.load()$.ajax()作为在返回的HTML要么消失剧本追加它,或者它根本不执行。


阅读 239

收藏
2020-07-26

共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');

演示:小提琴

2020-07-26