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

Posted 2023-05-08

【中文标题】文档就绪功能在嵌套的 html 页面中不起作用：jQuery

【英文标题】：Document ready function not working in nested html page : 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 不会触发.. 只是检查）

【参考方案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 文件中