Question

I’m working on a website that has a menu and a submenu on the header.

I’m loading on the html the header this way (this script is in the bottom of the html file):

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

The problem is that when I load the header that way, this script (that works if I have the header on the same html) stops working (this script is in the main.js file):

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

Why does it stops working when on a loaded html file?

Answer 1

You might want to use on to make sure the elements “always” have the events bound to them. For example, I would think you’d need something like this:

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