页面侧边栏通过AJAX请求数据之后下拉菜单无法显示

Question

静态页面的时候侧边栏下拉都没什么问题，后来侧边栏数据通过AJAX获取之后下拉菜单就出不来了，点击一级菜单没反应，

论坛搜索过部分问题好像是添加live()什么的，但是我修改了下貌似解决不了，页面是bootstrap框架搭的。

下面是html部分：

<!-- sidebar menu -->
                <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                    <div class="menu_section">
                        <!--h3>General</h3-->
                        <ul class="nav side-menu" id="menu">
                            <!--li><a><i class="fa fa-building-o"></i> 系统管理 <span class="fa fa-chevron-down"></span></a>
                                <ul class="nav child_menu">
                                    <li><a name="menuUrl" href="company.html" target="_parent">部门管理</a></li>
                                    <li><a href="role.html" target="_parent">岗位管理</a></li>
                                    <li><a href="user.html" target="_parent">员工管理</a></li>
                                    <li><a href="attach.html" target="_parent">附件管理</a></li>
                                </ul>
                            </li-->    
                            
                        </ul>
                    </div>


                </div>
                <!-- /sidebar menu -->

下面是ajax请求部分：

<script type="text/JavaScript">
    $(function () {
        query();
    });

    function query() {
        var showContent = '';
        $.ajax({
            type: "get",
            url: "../home/menu", //Servlet请求地址
            dataType: "json",
            success: function (data) {
                var con = data;//获取json中的list列表
                for (var i = 0; i < con.length; i++) {
                    var a = con[i];
                    showContent += 
                            '<li><a><i class="fa fa-building-o"></i> ' + a.name + ' <span class="fa fa-chevron-down"></span></a> ' +
                            '<ul class="nav child_menu">';
                    if (!a.leaf) {
                        for(var j=0; j < a.children.length; j++) {
                            var c = a.children[j];
                            showContent += '<li><a name="menuUrl" href="..'+ c.url +'" target="_parent">'+ c.name+'</a></li>';
                        }
                    }
                    showContent += '</ul> </li>';
                }

               $("#menu").html(showContent);
        
                
                console.info("内容已经加载并初始化");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
                console.info("数据请求异常 请查看控制台错误 或者检查servlet配置");
            }
        });
    }
</script>

下面是下拉效果JS部分：

var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
    $BODY = $('body'),
    $MENU_TOGGLE = $('#menu_toggle'),
    $SIDEBAR_MENU = $('#sidebar-menu'),
    $SIDEBAR_FOOTER = $('.sidebar-footer'),
    $LEFT_COL = $('.left_col'),
    $RIGHT_COL = $('.right_col'),
    $NAV_MENU = $('.nav_menu'),
    $FOOTER = $('footer');

    
    
// Sidebar
function init_sidebar() {
// TODO: This is some kind of easy fix, maybe we can improve this
var setContentHeight = function () {
    // reset height
    $RIGHT_COL.css('min-height', $(window).height());

    var bodyHeight = $BODY.outerHeight(),
        footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
        leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
        contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;

    // normalize content
    contentHeight -= $NAV_MENU.height() + footerHeight;

    $RIGHT_COL.css('min-height', contentHeight);
};

  $SIDEBAR_MENU.find('a').on('click', function(ev) {
      console.log('clicked - sidebar_menu');
        var $li = $(this).parent();

        if ($li.is('.active')) {
            $li.removeClass('active active-sm');
            $('ul:first', $li).slideUp(function() {
                setContentHeight();
            });
        } else {
            // prevent closing menu if we are on child menu
            if (!$li.parent().is('.child_menu')) {
                $SIDEBAR_MENU.find('li').removeClass('active active-sm');
                $SIDEBAR_MENU.find('li ul').slideUp();
            }else
            {
                if ( $BODY.is( ".nav-sm" ) )
                {
                    $SIDEBAR_MENU.find( "li" ).removeClass( "active active-sm" );
                    $SIDEBAR_MENU.find( "li ul" ).slideUp();
                }
            }
            $li.addClass('active');

            $('ul:first', $li).slideDown(function() {
                setContentHeight();
            });
        }
    });

Answer 1

ajax请求后生成了html，但是没有给DOM绑定事件。需要重新绑定，或者使用事件委托绑定外层容器实现点击