文档就绪功能在嵌套的 html 页面中不起作用：jQuery答案

【问题标题】：Document ready function not working in nested html page : jQuery文档就绪功能在嵌套的 html 页面中不起作用：jQuery
【发布时间】：2016-11-18 12:48:23
【问题描述】：

我有一个包含 1 个 div 的 HTML 页面。

<div id="secondPage"></div>

并且拥有

<script>
$(document).ready(function(){

$("secondPage").load("mySecondHtmlPage.html")
})
</script>

这个 mySecondHtmlPage.hmtl 正在加载，但我想在第二个 html 页面中拥有另一个文档准备功能，该功能没有触发。

当我在该页面（第二个 html）中有一个 jQuery 引用时，documentReady 函数也被触发，但它没有在 div 内正确加载。

第二个 html 页面：

<div>
 My Content  goes here
</div>
<script>
$(document).ready(function(){
alert(''); //Not firing 
})
</script>

当我在顶部有一个 jQuery 引用时，警报正在触发但它没有被加载到第一个 html 页面中。

【问题讨论】：

你包含jquery库文件吗？
忘记在加载页面$("#secondPage").load("mySecondHtmlPage.html")的jquery中添加#
让我们明确一点 - 您正在将第二页安装到文档中，对吗？（否则，当然 ready 不会触发.. 只是检查）

标签： javascript jquery html document-ready jquery-load

【解决方案1】：

您可以在页面加载后触发不同的事件：

$( "#secondPage" ).load( "mySecondHtmlPage.html", function() {
    $(document).trigger('page-ready');
});

然后在第二页使用这个：

<div>
     My Content  goes here
</div>
<script>
    $(document).on('page-ready', function(){
        alert(''); //Not firing 
    });
</script>

阅读更多关于.trigger()here的信息。

【讨论】：

【解决方案2】：

你应该使用 iframe 或 XMLHttpRequest

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       // Action to be performed when the document is read;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

【讨论】：

【解决方案3】：

将来自mySecondHtmlPage.html 的所有 javascript 代码放在第一页中，或者最好将两个页面中的 javascript 分离到链接到第一页的 expernal javascript 文件中

【讨论】：