Question

我将导航栏加载到脚本标记页面底部$("#navbar-partial").load("navbar.html)的每个页面中。

导航栏列表代码如下：

<ul id="main-nav" class="nav nav-sidebar">
  <li>
    <a href="a.html"></a>
  </li>                     
  <li>
    <a href="b.html"></a>
  </li>
  <li>
    <a href="c.html"></a>
  </li>
  <li>
    <a href="d.html"></a>
  </li>
</ul>

我已经尝试了这个和一些变体，但不能让它工作：

$(document).ready(function () {
    $('.nav li').on('click', function (e) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

在加载调用之后，它位于html页面底部的相同脚本标记中。

有什么想法吗？

由于

Answer 1

你应该使用委托

$(document).on('click', ".nav li", function(e) {
        $(this).addClass('active').siblings().removeClass('active');
    });

Answer 2

因为内容不存在于DOM就绪（鉴于Ajax的异步性质），您需要使用on()将click处理程序绑定到祖先元素，在DOM准备就绪的DOM中，id="navbar-partial"元素，在其中加载新内容：

// selecting the element present on DOM-ready:
// binding the 'click' event that's fired on elements
// matching the '.nav li' selector:
$('#navbar-partial').on('click', '.nav li', function (e) {
    $(this).addClass('active').siblings().removeClass('active');
});

您可以绑定到DOM树上的元素，但绑定到最近的元素会减少检测事件所需的冒泡量。

参考文献：

on()。

在导航栏中将HTML列表项更改为活动状态

2 个答案: