jQuery單擊時觸發兩次

Question

使用jQuery .on('click', ...)該函數執行兩次：

$(document).ready(function () {
    $('#collapsible-menu li a').click(function() {
        $('#collapsible-menu li').removeClass('active');
        $(this).parent('li').addClass('active');
    });
});

因此，發生的情況是菜單項立即處於活動狀態，然后類消失了。

我不知道為什么它被發射了兩次。 我不想使用event.preventDefault()或event.preventPropagation()或return false因為單擊鏈接將無濟於事。

HTML：

<div class="collapse navbar-collapse" id="collapsible-menu">
  <ul class="nav navbar-nav">
    <li class="active"><a href="/expenses">Expenses</a></li>
    <li class=""><a href="/types">Types</a></li>
  </ul>
</div>

Answer 1

您正在單擊將頁面重定向到/types的錨點。

當您轉到另一個頁面時，JavaScript所做的任何更改都將丟失。
因此，您要添加一個類，然后將其重定向並丟失該類，事件處理程序不會觸發兩次
為了避免重定向，您可以阻止錨的默認操作

$('#collapsible-menu li a').click(function(e) {
    e.preventDefault();
    $('#collapsible-menu li').removeClass('active');
    $(this).parent('li').addClass('active');
});

您不能期望保留該類並同時進行重定向，而必須要做一個或另一個。