加載的內容打破子菜單切換

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