AJAX调用后，Javascript无法加载

Ok the following HTML code is parsed when I load a page:

好的，我加载页面时会解析以下HTML代码：

<div id="clip-wrapper"> 
    <script type="text/javascript"> 
        alert("bla");
    </script> 
</div>

This obviously leads to an alert saying "bla", after my AJAX call, the parsed HTML code looks like this:

这显然会导致警告说“bla”，在我的AJAX调用之后，解析的HTML代码如下所示：

<div id="clip-wrapper">
<script type="text/javascript">
    alert("ajaxbla");
</script>
</div>

This on the other hand, doesn't result in an alert. Why? And how do I fix this?

另一方面，这不会导致警报。为什么？我该如何解决这个问题？

4 个解决方案

#1

If there are any scripts loaded into your dom from an Ajax call, they will not be executed for security reasons.

如果从Ajax调用中将任何脚本加载到您的dom中，则出于安全原因，它们将不会被执行。

To get the script to execute, you'll need to strip it out of the response, and run it through eval

要使脚本执行，您需要将其从响应中删除，然后通过eval运行它

Ideally though, you'll want to run your script as a callback for when your ajax request completes. If you're using jQuery, this would be the success event of your ajax call, and if you're doing it natively, it would be the readyStateChange event of your xhr object.

但理想情况下，您需要将脚本作为ajax请求完成时的回调运行。如果您正在使用jQuery，那么这将是您的ajax调用的成功事件，如果您在本地执行它，那么它将是您的xhr对象的readyStateChange事件。

EDIT

编辑

If you really want to opt for the eval option, you could try something like this:

如果你真的想选择eval选项，你可以试试这样的：

document.getElementById(contentDiv).innerHTML = xmlHttp.responseText;
eval(document.getElementById("clip-wrapper").innerHTML);

#2

put you code in

把代码放进去

$(document).ready(function()
{
  alert(msg);
});

or make use of readysatchange event of XMLHttp object.

或者使用XMLHttp对象的readysatchange事件。

XMLHttpobject.readyStateChange( furnction() { alert('msg'); } );

Edit

编辑

if you are using jquery than go for

如果你使用jquery而不是去

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});

here in sucess event you can write your code which get executed once you are done with the ajax.

在sucess事件中，您可以编写代码，一旦完成ajax就会执行。

#3

any code inside body in between script tag will executed only while loading the document.

脚本标记之间的正文中的任何代码仅在加载文档时执行。

in ajax call,make use of callback or success: or oncomplete: to handle the ajax response if you are using jQuery.

在ajax调用中，使用回调或成功：或oncomplete：如果你正在使用jQuery来处理ajax响应。

#4

You mean the second html code is coming as an ajax response?? Did you even inserted the html to the current page?

你的意思是第二个HTML代码将作为ajax响应？你有没有把html插入当前页面？

Something like,

就像是，

document.body.innerHTML = ajax_response;

But even with innerHTML replacement I don't thing the script inside it will be auto executed. The browser will parse the script but won't auto execute it. (For eg, if you have a function definition in the html, after the ajax call you will be able to call those functions)

但即使使用innerHTML替换，我也不会自动执行其中的脚本。浏览器将解析脚本但不会自动执行它。（例如，如果你在html中有一个函数定义，在ajax调用之后你就可以调用这些函数）

Another option is to use document.write, it will replace the whole page content with the new html and the script tags in it will be auto executed.

另一种选择是使用document.write，它将用新的html替换整个页面内容，其中的脚本标签将自动执行。

document.write(ajax_response);

Hope this helps,

希望这可以帮助，

#1