jQuery .load() / .ajax() 在附加后没有在返回的 HTML 中执行 javascript答案

【问题标题】：jQuery .load() / .ajax() not executing javascript in returned HTML after appendedjQuery .load() / .ajax() 在附加后没有在返回的 HTML 中执行 javascript
【发布时间】：2013-04-27 11:18:20
【问题描述】：

我尝试使用.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 中的脚本要么在添加时消失，要么根本不执行。

【问题讨论】：

试试这个演示 plnkr.co/edit/Hj0cyTUV44BPrxiOvPpW?p=preview
谢谢，成功了！
我会更新这个作为答案

标签： javascript jquery ajax load

【解决方案1】：

当load() 与片段选择器一起使用时，脚本元素将在添加片段之前被剥离，因此script will not get executed。

当使用没有后缀选择器的 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');

演示：Fiddle

【讨论】：

@RobinMaben 是的，应该
$(result) 将删除脚本内容。你试过了吗？
这不起作用，因为 $(result) 将返回一个数组，所以 find() 将不起作用。您应该使用 filter() 从数组中获取所需的元素。
小心这个解决方案，有人可能会评论脚本链接，所以你需要另一个 javascript 文件。类似 XSS 的东西
不应该这样工作吗？ $('#new_content').load(url).not('#content > *').remove()

【解决方案2】：

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

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

你可以使用

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

【讨论】：

绝对有效，并且比公认的答案更安全

【解决方案3】：

这段代码怎么样，

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

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

加载它

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

或者只是使用，

eval(source);

【讨论】：