jQuery - 点击事件只触发一次

Question

我有一个点击功能，它只在第一次激活时触发。

基本上我有一个 Bootstrap 4 站点，当我打开任何下拉菜单时，我想在标题中添加一个类。当我单击“ul li”时，它会根据我的代码在控制台中记录“test”，但是当我再次单击它以关闭菜单并再次等时，它永远不会输出控制台日志消息再次。

$(document).on('click', '.navbar-nav li', function() {
    console.log('test');
    $('.navbar-nav li').each(function() {
        if ($(this).hasClass('show')) {
            // Add Class Code
        }
    });
});

这是我的 HTML：

<ul id="menu-main-menu" class="navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-62" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-62 nav-item"><a title="Golf" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-62">Golf</a>
    <div class="dropdown_wrapper">
        <div class="container">
            <div class="row w-100">
                <div class="col-12 position-unset">
                    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-62" role="menu">
                        <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-78" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-78 nav-item">
                            <a title="Golf Courses" href="#" class="dropdown-item">Golf Courses</a> 
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-72" class="box_button menu-item menu-item-type-custom menu-item-object-custom menu-item-72 nav-item">
    <a title="Course Update" href="#" class="nav-link">Course Update</a>
</li>

任何帮助将不胜感激，谢谢！

Answer 1

我猜你想要这样的东西：

$('.navbar-nav').find('li').on('click', e => {
  console.log('test');
    
  if ($(e.currentTarget).hasClass('show')) {
    // Add Class Code
  }
})

试试这个。