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，但变量被设置为从控制器返回的值。

所以总而言之，我试图得到一些包含JS的HTML，需要在HTML被附加之后运行，但我没有运气使用.load()或$.ajax()作为返回的HTML中的脚本在附加它时消失，或者它根本不执行。

Answer 1

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

当使用没有后缀选择器的URL调用.load()时表达式中，在脚本运行之前，内容被传递给.html()移除。这将在脚本块被丢弃之前执行它们。如果.load()调用时会在URL后面附加一个选择器表达式，但是，在更新DOM之前，脚本被剥离，因此不会被执行。下面是两种情况的例子:

所以尝试

$.get('partial.html', function(result){
    $result = $(result);
    $result.find('#content').appendTo('#new_content');
    $result.find('script').appendTo('#new_content');
}, 'html');

演示:小提琴

Answer 2

如果您知道要执行的脚本是什么，则可以在ajax响应之外的其他地方定义该脚本，然后从回调调用它。所以不是:

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

可以用

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

Answer 3

下面的代码呢，

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

或者您可以简单地将JavaScript内容移动到单独的文件中，然后使用

加载它。

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

或者直接用

eval(source);