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

我已经尝试使用.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后在callback中运行此JavaScript,但variables被设置为从控制器返回的值。

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

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

当使用没有后缀select器expression式的URL调用.load()时,在脚本被移除之前,内容被传递给.html()。 这在执行脚本块之前被丢弃。 如果使用附加到URL的select器expression式调用.load(),则会在更新DOM之前剥离脚本,从而不执行。 这两种情况的例子可以看到如下:

所以尝试

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

演示: 小提琴

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

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

您可以使用

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

这个代码如何,

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

或者您可以简单地将您的JavaScript内容移动到单独的文件并加载它

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

或者只是使用,

 eval(source);