javascript - 如何在加载后运行 AJAX 加载的页面脚本

Question

这个问题已经有答案了:

jQuery .load() / .ajax() not executing javascript in returned HTML after appended (3 个回答)

已关闭 8 年前。

我有一个像这样的页面，page1.php代码将使用ajax加载:

...
<div id="myContent" >
<!-- ajax content load here -->
</div>
...

我的ajax代码是:

 $.ajax({
        type: 'post',
        url: 'codes/page.php',
        async: false,
        data: formDatas
        , success: function (response) {
            document.getElementById('myContent').innerHTML = response; // response contains page1.php codes
            }
        }
    });

这些数据将从 page1.php 加载:

<script>
    alert("hello");
</script>

<div>
    ...
</div>

现在我的问题是，当我直接加载 page1.php 时，会发出“hello”警报。但是当我通过 ajax 加载此内容时，脚本不起作用并且没有任何警报

在 myContent div 中加载数据后，如何运行这些脚本。

谢谢大家

Answer 1

对于遵循 HTML5 规范的浏览器(即所有当前的主要浏览器)，script elements inserted using innerHTML do not execute when they are inserted .

但是，如果您使用 jQuery 的 .html()方法，您的脚本将执行:

$.ajax({
    type: 'post',
    url: 'codes/page.php',
    data: formDatas, 
    success: function (response) {
        $('#myContent').html(response);
    }
});

工作 fiddle here