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!");
           }
      });
 });

下面是另一个带有全新.on函数的函数：

 $(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()调用需要等到.load()完成。在此重载中，第二个参数是响应完成时的回调方法。