jQuery append function damage functionality

I am using sb-admin-2 bootstrap template (template demo) for a simple project. I have a trouble with left side menu.

Here is default menu items code;

<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>

It looks like this when menu item with submenus is opened:

It looks like this when menu item with submenus is closed:

When I make an ajax request for adding items to menu, it breaks the show/hide functionality of menu item. When I click arrow which is near to "Ajax loaded menu item", no event handled. Here is my code and screenshot of broken menu item;

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

How can I fix this issue?

In the sb-admin-2.js file of the template you have the following call for the Metis Menu Function, which enables the functionality you want.

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

I don't know when you ajax call is made, but after you added the additional elements to the menu you have to make this metisMenu call (again).

Just put in in your ajax call, after the

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

Maybe you have remove it from the sb-admin-2.js file. Experiment with it. But making the $('#side-menu').metisMenu(); call after you attached the items is crucial for the functionality.