jQuery .load() / .ajax() 在附加后不在返回的 HTML 中执行 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16352371/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .load() / .ajax() not executing javascript in returned HTML after appended
提问by John
I've tried using .load()and $.ajaxto get some HTML that needs to be appended to a container, but the Javascript within the returned HTML is not being executed when I append it to an element.
我尝试使用.load()并$.ajax获取一些需要附加到容器的 HTML，但是当我将它附加到元素时，返回的 HTML 中的 Javascript 没有被执行。
Using .load():
使用.load()：
$('#new_content').load(url+' #content > *',function() {
alert('returned');
});
I've also tried switching to a $.ajax call. I then extracted the script from the returned HTML after which I appended it to the container, but same problem, the JS isn't being executed or even appended in this case, and as I understand it, trying to append a <script>to a DOM element like this is frowned upon?
我也试过切换到 $.ajax 调用。然后我从返回的 HTML 中提取脚本，然后将其附加到容器中，但同样的问题，在这种情况下，JS 没有被执行甚至没有被附加，据我所知，试图将 a 附加<script>到 DOM 元素像这样不好吗？
Using $.ajax:
使用$.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();
});
Ideally I would run this javascript in a callback after I have appended the HTML, but variables are being set to values that are returned from a controller.
理想情况下，我会在附加 HTML 后在回调中运行此 javascript，但变量被设置为从控制器返回的值。
So in summary, I am trying to get some HTML which contains JS that needs to be run after that HTML has been appended, but I have had no luck using .load()or $.ajax()as the script in the returned HTML either disappears upon appending it, or it does not execute at all.
所以总而言之，我正在尝试获取一些包含在附加该 HTML 后需要运行的 JS 的 HTML，但是我没有运气使用.load()或$.ajax()因为返回的 HTML 中的脚本要么在附加时消失，要么确实如此根本不执行。
回答by Arun P Johny
When load()is used with a fragment selector the script element will be stripped out before the fragment is added thus the script will not get executed.
当load()与片段选择器一起使用时，脚本元素将在添加片段之前被删除，因此脚本不会被执行。
When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:
使用不带后缀选择器表达式的 URL 调用 .load() 时，内容会在删除脚本之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被删除，因此不会被执行。下面是这两种情况的示例：
So Try
所以试试
$.get('partial.html', function(result){
$result = $(result);
$result.find('#content').appendTo('#new_content');
$result.find('script').appendTo('#new_content');
}, 'html');
Demo: Fiddle
演示：小提琴
回答by Marc
If you know what's the script you want to execute, you can define the script somewhere else, out of the ajax response, and then call it from the callback. So instead of:
如果您知道要执行的脚本是什么，则可以在 ajax 响应之外的其他地方定义脚本，然后从回调中调用它。所以而不是：
$('#new_content').load(url+' #content > *',function() {alert('returned');});
you can use
您可以使用
$('#new_content').load(url+' #content > *',function() {my_function(my_param);});
回答by Chamika Sandamal
How about this code,
这段代码怎么样
$('#new_content').append($('<script>').html(source));
or you can simply move your JavaScript content to seperate file and load it using
或者您可以简单地将您的 JavaScript 内容移动到单独的文件并使用
$.getScript("url to js file");
or just use,
或者只是使用，
eval(source);
