javascript - 加载的内容破坏了子菜单切换

Question

我正在开发一个在标题上有一个菜单和一个子菜单的网站。

我正在以这种方式加载 html 标题（此脚本位于 html 文件的底部）：

    <script type="text/javascript">
        $('#header').load('includes/header.html', function(){
        });
    </script>

问题是，当我以这种方式加载标头时，此脚本（如果我在同一 html 上有标头，则该脚本有效）停止工作（此脚本位于 main.js 文件中）：

    function mainmenu(){
    // hide submenu
    $(" ul#mainnav ul ").css({display: "none"});
    // Defino que submenus deben estar visibles cuando se pasa el mouse por encima
    $(" ul#mainnav li").hover(function(){
        $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            $(this).find('ul:first').slideUp(400);
        });
    }
    $(document).ready(function(){
        mainmenu();
    });

为什么它在加载的 html 文件上停止工作？

Answer 1

您可能希望使用on它来确保元素“始终”具有绑定到它们的事件。例如，我认为你需要这样的东西：

function mainmenu() {
    $("#header").on({"mouseenter": function () {
        $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
    }, "mouseleave": function () {
        $(this).find('ul:first').slideUp(400);
    }}, "ul#mainnav li");
}

$(document).ready(function(){
    mainmenu();
});