HTML 文件的 jQuery .load() 在 Chrome 中不一致

Question

我知道我的问题与许多其他问题有点重复，但我还没有找到解决我问题的答案。我试图在多个页面上使用响应式菜单，所以我将它的 HTML 代码放在一个单独的文件中……减去 HTML、HEAD、BODY 标签。我们称它为 menu.html。菜单需要 CSS 和 JS 文件，我在 index.html 中引用了它们。 CSS 在 HEAD 中加载，JS 文件在结束 BODY 标记之前加载。我希望菜单出现的位置:

<div id="topMenu"></div>
<script>$('#topMenu').load('vgg_menu.html');</script>

我将所有文件都放在虚拟服务器上，因此没有在本地运行任何内容。奇怪的是...菜单在 IE8 中工作得很棒。在 Chrome 和 FireFox 中，父菜单项显示并按应有的样式设置，但下拉/子菜单项不起作用。但是......菜单将在我打开开发工具面板后工作。去搞清楚!我刷新页面，菜单不起作用...我打开开发工具面板，菜单起作用了。

正如我所说，我已经尝试了在其他帖子中找到的所有建议。我是否使用“$(document).ready(function()”并不重要。它不起作用。我已经尝试为菜单动态加载 CSS - 没有区别。哦，是的......不Dev Tools 控制台中的错误。如果我在 index.html 页面上直接输入菜单的 HTML，它在所有浏览器中都运行良好，因此 CSS 或 JS 文件中的代码没有任何问题。

有没有人知道为什么我无法让这个 .load() 在 Chrome 中正常工作？非常感谢任何指导。虽然它不会运行，但我已经发布了 my code here .

Answer 1

AJAX 请求，在您的情况下通过 jQuery load(url, complete) function , 是异步的，这意味着在您的 .html 文件中的内容可用于 dom 之前需要一些时间，同时您的脚本继续执行。这就是问题所在。当文档准备好后，您将在将元素添加到 dom 之前调用 adjustMenu。要解决此问题，您只需将 adjustMenu 作为完整的回调函数传递给 .load()。 ajax 请求完成时将调用 complete 回调。

$(document).ready(function() {
    $('#topMenu').load('menu.html', adjustMenu);

    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    });

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
});

Updated your demo with these adjustments

PS:很抱歉之前的评论不完整，只是快速浏览了一下您的代码...