jQuery - 從文件加載菜單 - 總是一個列表，從來沒有一個菜單

Question

我想能夠從HTML文件中加載菜單，並讓它們作爲菜單的功能。文本將加載，但唉，它總是顯示爲簡單的列表 - 菜單和子菜單選項全部可見 - 而不是菜單。

這裏是shortmenu.html，我的測試文件之一：

<ul id="menuChap"> 
<li><a href="#">Item 1</a></li> 
<li><a href="#">Item 2</a></li> 
<li><a href="#">Item 3</a> 
<ul> 
<li><a href="#">Item 3-1</a></li> 
<li><a href="#">Item 3-2</a></li> 
</ul> 
</li> 
<li><a href="#">Item 4</a></li> 
<li><a href="#">Item 5</a></li> 
</ul> 

這是最簡單的嘗試腳本，完成一個毫無意義的象徵作用：

$(document).ready(function() { 

     $('#menuDiv').load('shortmenu.html'); 

     $('#menuChap').menu({ 
      select: function(event, ui){ 
       alert("Pushed!"); 
      } 
     }); 
}); 

這裏的另一個有時間浪費警報以確保在繼續執行其他任務之前完成加載：

$(document).ready(function() { 

     $('#menuDiv').load('shortmenu.html', function() { 
      alert("Load is finished"); 
     }); 

     $('#menuChap').menu({ 
      select: function(event, ui){ 
       alert("Pushed!"); 
      } 
     }); 
}); 

這裏的另一個與新奇。對功能：

$(document).ready(function() { 

     $('#menuDiv').on('click', function(e) { 
      e.preventDefault(); 
      $('#menuDiv').load('shortmenu.html'); 
      alert("Load is finished"); 
     }); 

     $('#menuChap').menu({ 
      select: function(event, ui){ 
       alert("Pushed!"); 
      } 
     }); 
}); 

和代替功能菜單，所有我曾經得到的是一個清單-Y疙瘩，看起來像這樣：

* Item 1 
* Item 2 
* Item 3 
     * Item 3-1 
     * Item 3-2 
     * Item 3-3 
     * Item 3-4 
* Item 4 
* Item 5 

那麼什麼我沒有看到？任何人都可以指點我一個很好的工作例子，或者讓我知道嗎？

謝謝！

Answer 1

您是否嘗試過：

$(function() { 
     $('#menuDiv').load('shortmenu.html', function() { 
      $('#menuChap').menu({ 
       select: function(event, ui){ 
       alert("Pushed!"); 
       } 
      }); 
     }); 
}); 

Ajax調用是異步的，所以你.menu()調用需要等到​​完成。在這個重載中，第二個參數是響應完成時的回調方法。