Bootstrap Dropdown下拉菜单点击事件无法触发的原因及修复方案

• Bootstrap Dropdown组件为了实现下拉菜单的默认交互逻辑，会对带有data-bs-toggle="dropdown"属性的触发元素的click事件做拦截，调用了事件的stopImmediatePropagation()方法，导致同元素上后续绑定的click事件、以及委托绑定的click事件无法被触发。
• 若你使用的是Bootstrap 5版本，其底层默认用原生JavaScript实现组件逻辑，和jQuery绑定的事件队列存在偶发的执行顺序冲突，也会导致自定义click事件不执行。

以下方案任选其一即可：

方案1：使用Bootstrap官方提供的Dropdown专属事件（最推荐） #

Bootstrap针对Dropdown组件内置了专属的生命周期事件，无需绑定click事件就能实现触发逻辑，不会和默认交互冲突：

// 下拉菜单展开前触发
$('.dropdown').on('show.bs.dropdown', function () {
  alert('下拉即将展开')
})

// 下拉菜单完全展开后触发
$('.dropdown').on('shown.bs.dropdown', function () {
  alert('下拉已完全展开')
})

方案2：替换事件类型为mousedown #

Bootstrap仅拦截了click事件，替换为mousedown事件即可正常触发：

$(document).on('mousedown','#page-header-notifications-dropdown',function() {
    alert();
});

方案3：手动控制Dropdown的显示隐藏 #

移除触发按钮上的data-bs-toggle="dropdown"属性，关闭默认的事件拦截，自己手动控制下拉的显隐：
修改后的按钮HTML：

<button type="button" class="btn header-item noti-icon waves-effect" id="page-header-notifications-dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="bx bx-bell"></i>
</button>

对应的JS逻辑：

$(document).on('click','#page-header-notifications-dropdown',function() {
    alert();
    // 手动调用下拉切换方法
    $(this).dropdown('toggle');
});

内容的提问来源于stack exchange，提问作者user14527894