HTML文件的jQuery.load（）在Chrome中不一致

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

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

$（'#topMenu'）.load（'vgg#u menu.html'）；

我的所有文件都在虚拟服务器上，因此没有任何文件在本地运行。奇怪的是。。。菜单在IE8中运行得非常好。在Chrome和FireFox中，父菜单项会显示出来，并按应有的样式设置，但下拉/子菜单项不起作用。然而。。。在我打开Dev工具面板后，菜单将起作用。算了吧！我刷新页面，菜单不工作。。。我打开Dev工具面板，菜单开始工作

正如我所说，我已经尝试了在其他帖子中找到的所有建议。我是否使用“$（document）.ready（function（）”并不重要或者没有。它不起作用。我已经尝试动态加载菜单的CSS-没有区别。哦，是的…在开发工具控制台中也没有错误。如果我在index.HTML页面上输入菜单的HTML，它在所有浏览器中都很好用，因此CSS或JS文件中的代码没有问题

---

有人知道我为什么不能得到这个。load（）要在Chrome中正常工作？非常感谢任何指导。虽然它不会运行，但我已经通过发布了一个AJAX请求，在您的情况下，它是异步的，这意味着在脚本继续执行的同时，.html文件中的内容需要一段时间才能用于dom。这就是问题所在。文档准备好后，在元素添加到dom之前，您将调用

adjustMenu

。要解决此问题，您只需将

adjustMenu

传递到

。load（）

作为完整回调函数。ajax请求完成后，将调用完整回调

$(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();
    });
});

---

PS：很抱歉前面的评论不完整，请快速查看一下您的代码…

在您的情况下，通过的AJAX请求是异步的，这意味着在脚本继续执行时，.html文件中的内容需要一段时间才能用于dom。这就是问题所在。当读取文档时在将元素添加到dom之前，您正在调用

adjustMenu

。要解决此问题，您只需将

adjustMenu

传递到

。load（）

作为完整回调函数。当ajax请求完成时，将调用完整回调

$(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();
    });
});

---

PS：很抱歉前面的评论不完整，只需快速查看一下您的代码…

在第50行的演示中似乎缺少了一个分号。不知道这是演示还是它也给您的真实代码带来了麻烦…此外，您需要将

adjustMenu

函数移到JS的顶部，因为它当前不是k不知道你的处理函数。谢谢@smonti。我试着按照你的建议移动adjustMenu函数，这确实解决了我的问题。很高兴听到这个消息！介意我也以awnser的身份发布我的评论，这样你就可以接受它，并将它标记为已为其他人解决了吗？哎呀…打字错误…我的意思是“没有”解析。抱歉。我没有看到您的建议有任何变化。您的演示在第50行似乎缺少一个分号。不知道这只是演示，还是它也给您的真实代码带来了麻烦…此外，您需要将

调整菜单

函数移到JS的顶部，因为您的处理程序函数目前不知道它。谢谢s@smonti。我试着按照你的建议移动adjustMenu功能，这确实解决了我的问题。很高兴听到这个消息！介意我也以awnser的身份发布我的评论，这样你就可以接受它，并将它标记为已为其他人解决了？哎呀……拼写错误……我的意思是“没有”解决。抱歉。我看不到您的建议有任何更改。时间问题在@smonti是有意义的。我将脱机几天，但下周可以进行更改。我会将您的答复标记为答案。（只是不想让您挂断。）谢谢你的帮助。顺便说一句，当打开开发工具时，会调用你的窗口大小调整处理程序，其中包含

adjustMenu

，如果ajax请求已经完成，菜单将按预期工作。这就是你观察的原因。谢谢@smonti。我终于有机会应用你的更改，这就成功了。现在，这在所有浏览器中都非常有效。感谢您的帮助。时间问题在@smonti是有意义的。我将脱机几天，但下周可以进行更改。我会将您的答复标记为答案。（只是不想让您挂断。）谢谢你的帮助。顺便说一句，当打开开发工具时，会调用你的窗口大小调整处理程序，其中包含

adjustMenu

，如果ajax请求已经完成，菜单将按预期工作。这就是你观察的原因。谢谢@smonti。我终于有机会应用你的更改，这就成功了。现在，这在所有浏览器中都非常有效。感谢您的帮助。