AJAX 调用后 Javascript 不加载答案

【问题标题】：Javascript doesn't load after AJAX callAJAX 调用后 Javascript 不加载
【发布时间】：2016-11-03 04:35:57
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

要让脚本执行，您需要将其从响应中剥离，并通过eval 运行它

不过，理想情况下，您会希望在 ajax 请求完成时将脚本作为回调运行。如果您使用 jQuery，这将是您的 ajax 调用的 success 事件，如果您在本机执行它，它将是您的 xhr 对象的 readyStateChange 事件。

编辑

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

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

【讨论】：

你能详细说明我如何从回复中得到它吗？然后通过 eval 运行它？我正在使用以下代码：function stateChanged() { if (xmlHttp.readyState == 4) document.getElementById(contentDiv).innerHTML = xmlHttp.responseText; } 其中 contentDiv 在这种情况下是剪辑包装器。（是不是像 eval(xmlHttp.responseText); 一样简单？）
好的，我想我是对的，但它仍然不起作用：if (xmlHttp.readyState == 4) { document.getElementById(contentDiv).innerHTML = xmlHttp.responseText; eval(document.getElementById(contentDiv).innerHTML); } 我错过了什么吗？感谢您的帮助，非常感谢！
我不认为 eval 喜欢其中的脚本标签 - 你能在没有它们的情况下发回响应吗？
这是否意味着 div 将仅填充 alert("msg");，因此它不会作为 javascript 代码运行？还是我理解错了？
如果它只是充满了 alert("msg") 你可以将它传递给 eval，它肯定会工作 -- eval("alert('msg');");会工作

【解决方案2】：

把代码放进去

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

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

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

编辑

如果你使用的是 jquery 而不是去

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

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

【讨论】：

我已经尝试过你的建议，它会解析以下 HTML 代码：
但它不会发出警报。 PS。如何在 cmets 中获取代码？
包含在内，因为我使用的是 Wordpress。
我没有对你进行-1，其他人做到了。抱歉，我也没有为你 +1。
@peterbond - 你试过编辑答案的ajax调用功能吗
不，我没有，对不起，我没有使用 jQuery。我为您+1（它至少取消了其他人的-1）为您的努力，因为看起来编辑后的代码将适用于jQuery，使用成功。我使用了@Adam Rackis 提供的解决方案，它就像一个魅力，也适用于我的真实脚本（在 jwplayer 中加载电影，取决于用户点击的内容）。

【解决方案3】：

script 标记之间的正文中的任何代码只会在加载文档时执行。

在 ajax 调用中，如果您使用 jQuery，请使用 callback 或 success: 或 oncomplete: 来处理 ajax 响应。

【讨论】：

【解决方案4】：

你的意思是第二个 html 代码是作为 ajax 响应来的？？您是否将 html 插入到当前页面？

类似的，

document.body.innerHTML = ajax_response;

但即使使用innerHTML 替换，我也不认为其中的script 会自动执行。浏览器将解析script，但不会自动执行它。（例如，如果您在 html 中有 function 定义，则在 ajax 调用之后您将能够调用这些函数）

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

document.write(ajax_response);

希望这会有所帮助，

【讨论】：