Активный класс не применяется при нажатии на ли

Question

Я хочу дать активный класс, когда нажимаю <li>, но он не работает.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
  <li class="nav-item"><a class="nav-link" href="auth"><i class="fa fa-sign-in"></i>Sign in</a></li>
  <li class="nav-item"><a class="nav-link" href="signup"><i class="feather icon-user-plus"></i>Signup</a></li>
  <li class="nav-item"><a class="nav-link" href="services"><i class="feather icon-list"></i>Services</a></li>
  <li class="nav-item">
    <a class="nav-link" href="terms"><i class="fa fa-bullhorn"></i>Terms</a>
  </li>
</ul>

$('.navbar-nav').on('click', 'li', function() {
  $('.navbar-nav li.active').removeClass('active');
  $(this).addClass('active');
});

Answer 1

Ну, у вас нет кода, поэтому я не могу сказать, что случилось с вашим кодом. Вот что я могу сделать вывод

// register a listener on click of any item with the class nav-item
$(document).on("click", ".nav-item", function(){
    // turn all nav-items "active" class off
    $(".nav-item").removeClass("active");
    // turn on the "active" class for this item
    $(this).addClass("active");
});