侦听 .load() 内容上的事件

Question

我有一个导航菜单，可以根据会话状态有条件地加载。

菜单之一看起来像这样..

 <ul class="nav navbar-nav menu" >
            <li id="index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</li>
            <li><a href="addhook.html"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Register Site</a></li>
            <li><a href="settings.html"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Favorites</a></li>
              <li><a href="#about"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
            <li><a href="settings.html"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings</a></li>
            <li><a href="login.html"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out</a></li>
        <ul>

加载它$("#navbar").load("unauthNav.html");对菜单中的项目进行操作，我可以使用回调，但我不确定如何在加载菜单后监听点击，因为它似乎没有进入 DOM。

如果它加载了 DOM，我会在我尝试过.on中使用$( document ).ready()然后单击处理程序，但这也不起作用。

例如

var navMain = $(".menu");
  navMain.on("click", "li", null, function () {
  alert($(this).attr('id'));
  navMain.collapse('hide');
})

Answer 1

尝试在

文档而不是 navmain 上使用单击事件处理程序，如下所示

  document.on("click", ".menu li", null, function () {
  alert($(this).attr('id'));
  navMain.collapse('hide');
})