jQuery .click() 无法正常工作 [重复]

Question

我查看了其他一些关于 .click 功能不起作用的 stackoverflow 问题，但似乎没有一个对我有帮助。我有我的 jquery 库的导入。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是我的 jquery，我不确定为什么这不起作用。我有它，所以它会等到页面加载后尝试运行。我在那个元素上有这个类，但它没有注册点击。

$(document).ready(function() {
            $('nav.product-description-nav ul li a').click(function() {
                $(".product-description-nav ul").find($('li a.active-product-selection')).removeClass('active-product-selection');
                $(this).addClass('active-product-selection');
            });
        });

这是我的导航，我正在尝试添加类并在单击时将其删除。

<nav class="product-description-nav">
    <ul>
        <li><a href="#" class="active-product-selection">Overview</a></li>
        <li><a href="#">Options</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">Request A Quote</a></li>
    </ul>
</nav>

我总是在使用 jquery 时遇到问题，并且我认为我引用了所有内容，如果我将该语句添加到单击调用的函数中，我知道删除类有效，但我不想在 a 元素中包含 onclick 函数。我的语法错了还是我引用了 jquery 库错误？

这是我的问题的答案

$(document).on('click','.product-description-nav a',function(){
            $(".product-description-nav a").removeClass('active-product-selection');
            $(this).addClass('active-product-selection');
        });

Answer 1

您并不总是需要整个层次结构。您可以简单地从nav 中的所有a 标记中删除该类，然后将该类添加回this：

$(document).ready(function() {
  $('nav.product-description-nav a').click(function() {
    $("nav.product-description-nav a").removeClass('active-product-selection');
    $(this).addClass('active-product-selection');
  });
});

.active-product-selection {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="product-description-nav">
  <ul>
    <li><a href="#" class="active-product-selection">Overview</a>
    </li>
    <li><a href="#">Options</a>
    </li>
    <li><a href="#">Downloads</a>
    </li>
    <li><a href="#">Request A Quote</a>
    </li>
  </ul>
</nav>