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

IT技术 javascript jquery ajax load
2021-02-08 21:39:59

我已经尝试使用.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 中的脚本要么在附加时消失，要么确实如此根本不执行。

3个回答

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

演示：小提琴

这不应该工作吗？ $('#new_content').load(url).not('#content > *').remove()
2021-03-14 21:39:59
$(result)将删除脚本内容。你试过吗？
2021-04-04 21:39:59
这将不起作用，因为 $(result) 将返回一个数组，因此 find() 将不起作用。您应该使用 filter() 以便从数组中获取所需的元素。
2021-04-06 21:39:59
@RobinMaben 是的，应该
2021-04-09 21:39:59
请注意此解决方案，有人可能会评论脚本链接，因此您需要另一个 javascript 文件。像 XSS 之类的东西
2021-04-09 21:39:59

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

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

您可以使用

$('#new_content').load(url+' #content > *',function() {my_function(my_param);});
绝对有效，并且比公认的答案更安全
2021-04-01 21:39:59

这段代码怎么样

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

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

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

或只是使用，

eval(source);
其它你可能感兴趣的问题
上一篇为什么 Array.prototype.push 返回新长度而不是更有用的东西？ 下一篇IE7 中的 getElementsByName