追加后，jQuery .load（）/ .ajax（）在返回的HTML中不执行javascript

Question

我尝试使用.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要么消失剧本追加它，或者它根本不执行。

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

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