jQuery追加函数损坏功能

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 请求时，它会破坏菜单项的显示/隐藏功能。当我单击“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();

我不知道您何时进行了 ajax 调用，但是在您将附加元素添加到菜单后，您必须（再次）进行此 metisMenu 调用。

在

之后加入你的 ajax 调用

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

也许您已将其从 sb-admin-2.js 文件中删除。尝试一下。但是在附加项目后进行$('#side-menu').metisMenu(); 调用对于功能至关重要。