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，我会在$( document ).ready()中使用点击处理程序我尝试过.on但这也不起作用。 e.g

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

Answer 1

尝试单击文档上的click事件处理程序而不是navmain，如下所示

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

在.load（）内容上监听事件。

1 个答案: