Bootstrap 4.6下拉菜单点击事件仅触发一次问题求助

在使用Bootstrap 4.6开发时，遇到下拉菜单异常：页面加载后首次点击“menu”下拉按钮，alert和console.log能正常触发，但再次点击时无任何响应。测试Bootstrap 5可正常运行，但暂无法迁移整个Web应用。

问题代码 #

JS代码：

$(document).on('click', '.dropdown-toggle', function(e) {
  alert("clicked"); // 仅触发一次
  console.log($(this)); // 仅触发一次
  if ($(this).attr('aria-expanded') == 'true') {
    console.log("A");
  } else {
    console.log("B");
  }
});

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
  <meta charset=utf-8 />
  <title>test</title>
</head>
<body>
  <div class="container">
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" role="button">
                  menu
                </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Test</a>
        <a class="dropdown-item" href="#">Test</a>
        <a class="dropdown-item" href="#">Test</a>
        <a class="dropdown-item" href="#">Test</a>
        <a class="dropdown-item" href="#">Test</a>
        <a class="dropdown-item" href="#">Test</a>
        <a class="dropdown-item" href="#">Test</a>
      </div>
    </div>
  </div>
</body>
</html>

问题原因 #

Bootstrap 4的下拉组件内部会对dropdown-toggle的点击事件做特殊处理：第一次点击后，组件会将事件绑定逻辑从委托改为直接绑定，同时内部调用stopPropagation()阻止事件冒泡到document层级，导致你通过$(document).on('click')绑定的事件无法在后续点击时触发。Bootstrap 5调整了事件处理逻辑，因此不存在这个问题。

解决方案 #

方案1：使用Bootstrap官方提供的下拉专用事件

这是最稳妥的方式，避免和组件内部逻辑冲突：

// 监听下拉菜单即将展开的事件
$(document).on('show.bs.dropdown', '.dropdown-toggle', function(e) {
  console.log("下拉菜单即将展开");
  console.log($(this));
  console.log("B"); // 此时aria-expanded为false
});

// 监听下拉菜单即将收起的事件
$(document).on('hide.bs.dropdown', '.dropdown-toggle', function(e) {
  console.log("下拉菜单即将收起");
  console.log($(this));
  console.log("A"); // 此时aria-expanded为true
});

方案2：直接绑定点击事件到元素

如果一定要用click事件，可以直接绑定到元素（而非document委托），但需确保代码在DOM加载完成后执行：

$(document).ready(function() {
  $('.dropdown-toggle').on('click', function(e) {
    alert("clicked");
    console.log($(this));
    if ($(this).attr('aria-expanded') == 'true') {
      console.log("A");
    } else {
      console.log("B");
    }
  });
});

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