jQuery append function damage функциональность

Question

Я использую sb-admin-2 bootstrap template (template demo) для простого проекта. У меня проблемы с меню левой стороны.

Здесь приведен код меню по умолчанию;

<div class="sidebar-nav navbar-collapse"> 
<ul class="nav" id="side-menu"> 
    <li> 
     <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a> 
    </li> 
    <li> 
     <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a> 
     <ul class="nav nav-second-level"> 
      <li> 
       <a href="flot.html">Flot Charts</a> 
      </li> 
      <li> 
       <a href="morris.html">Morris.js Charts</a> 
      </li> 
     </ul> 
     <!-- /.nav-second-level --> 
    </li> 
    <li> 
     <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a> 
    </li> 
    <li> 
     <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a> 
    </li> 
    <li> 
     <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a> 
     <ul class="nav nav-second-level"> 
      <li> 
       <a href="panels-wells.html">Panels and Wells</a> 
      </li> 
      <li> 
       <a href="buttons.html">Buttons</a> 
      </li> 
      <li> 
       <a href="notifications.html">Notifications</a> 
      </li> 
      <li> 
       <a href="typography.html">Typography</a> 
      </li> 
      <li> 
       <a href="grid.html">Grid</a> 
      </li> 
     </ul> 
     <!-- /.nav-second-level --> 
    </li> 
    <li> 
     <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a> 
     <ul class="nav nav-second-level"> 
      <li> 
       <a href="#">Second Level Item</a> 
      </li> 
      <li> 
       <a href="#">Second Level Item</a> 
      </li> 
      <li> 
       <a href="#">Third Level <span class="fa arrow"></span></a> 
       <ul class="nav nav-third-level"> 
        <li> 
         <a href="#">Third Level Item</a> 
        </li> 
        <li> 
         <a href="#">Third Level Item</a> 
        </li> 
        <li> 
         <a href="#">Third Level Item</a> 
        </li> 
        <li> 
         <a href="#">Third Level Item</a> 
        </li> 
       </ul> 
       <!-- /.nav-third-level --> 
      </li> 
     </ul> 
     <!-- /.nav-second-level --> 
    </li> 
    <%-- 
    <li> 
     <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a> 
     <ul class="nav nav-second-level"> 
      <li> 
       <a href="blank.html">Blank Page</a> 
      </li> 
      <li> 
       <a href="login.html">Login Page</a> 
      </li> 
     </ul> 
     <!-- /.nav-second-level --> 
    </li> 
    --%> 
</ul> 

Похоже, это когда пункт меню с подменю открывается:

Похоже, это когда пункт меню с подменю закрыт:

Когда я делаю запрос ajax для добавления элементов в меню, он нарушает функции show/hide для мужчин u пункт. Когда я нажимаю стрелку, которая находится рядом с «Элементом меню, загруженным Ajax», никакое событие не обрабатывается. Вот мой код и скриншот сломанного пункта меню;

$(document).ready(function() { 
$.ajax({ 
    url  : "/loadMenuItems", 
    success : function(result) 
    { 
     var menuList = result.menuList; 

     $.each(menuList, function(menuIndex, menuItem) { 

      var newMenuItem = '<li> ' + 
           ' <a href="#"><i class="fa fa-files-o fa-fw"></i>' + menuItem.itemHeader + '<span class="fa arrow"></span></a>' + 
           ' <ul class="nav nav-second-level"> ' + 
           '  <li> ' + 
           '   <a href="blank.html">' + menuItem.item1 + '</a> ' + 
           '  </li> ' + 
           '  <li> ' + 
           '   <a href="login.html">' + menuItem.item2 + '</a> ' + 
           '  </li> ' + 
           ' </ul> ' + 
           '</li> '; 

      $('#side-menu').append(newMenuItem); 
     }); 
    } 
}); 
}); 

Как я могу решить эту проблему?

Answer 1

В файле шаблона sb-admin-2.js у вас есть следующий вызов функции меню Metis, которая позволяет использовать нужные функции.

$('#side-menu').metisMenu(); 

Я не знаю, когда вы Аякс вызов сделан, но после того, как вы добавили дополнительные элементы в меню, вы должны сделать это metisMenu вызов (снова).

Просто поместите в вашем АЯКСЕ вызова, после

$ ('# бокового меню') Append (newMenuItem).

Возможно, вы удалили его из файла sb-admin-2.js. Поэкспериментируйте с ним. Но вызов $('#side-menu').metisMenu(); после того, как вы подключили элементы, имеет решающее значение для функциональности.