为什么通过ajax加载后javascript无法工作？

Question

我有一个带有此脚本的主页，用于将 status.html 加载到我的 info-box_main div 中

window.onload = ajax_req('scripts/home/php/status.html', 'info-box_main');

加载的status.html文件如下所示。

<div id="status_update">
    <form id="status_form" method="post" action="/scripts/home/php/statusUpdate.php/">
        <textarea name="status_update" placeholder="Type Link update here. " id="status_field" ></textarea>
        <input type='submit' value='post'/>
    </form>
</div>

<div id='status-box'>
    <button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

    <script>
        function myFunction(name,job){
            alert("Welcome " + name + ", the " + job);
        }
    </script>
</div>

---

ajax_req 函数

function ajax_req(file_location, document_element)
{
var xmlhttp;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }                                 //ajax update request
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(document_element).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",  file_location ,true);
xmlhttp.send();
}

除了 javascript 一切正常。当我尝试单击按钮时，我收到一条错误消息，指出该功能未定义。任何帮助都是极好的！这只是测试 javascript...不是我需要的实际 javascript

Answer 1

将元素的innerHTML 属性设置为包含<script> 标记的HTML 内容字符串不会在我知道的任何浏览器中运行脚本内容。

如果您确实在使用 jQuery，那么绝对没有理由编写自己的 ajax 工具，并且 jQuery .load() 方法将为您处理脚本内容。

$('#info-box_main').load('scripts/home/php/status.html');

Answer 2

如果您将它包含在标题中的脚本中，这应该可以工作。

window.onload = function () {
    $('#info-box_main').load('scripts/home/php/status.html');
};

替代解决方案：

$(document).ready(function () {
    $('#info-box_main').load('scripts/home/php/status.html', function () {
        $("#status-box").bind("click", myFunction);
        // Seperate javascript from html, and only bind event once hmtl has loaded.
    });
};
function myFunction (name,job) {
    alert("Welcome " + name + ", the " + job);
}

如果您坚持内联您的 javascript，我会考虑将脚本标记放在引用脚本标记中的值的任何其他标记之前（例如您的示例中的按钮标记）。这样你就可以确定你的 script 标签在其值被引用之前已经被评估了。