为何Bootstrap Dropdown仅点击一次后值就不再变更？

嘿，我碰到过好几个开发者遇到这个问题！咱们先拆解下Bootstrap 3下拉菜单（Dropdown）只能触发一次值变更的常见原因，再给你对应的解决办法：

常见原因及对应修复方案 #

1. 事件绑定被意外移除或覆盖 #

如果你的代码里是直接把click事件绑定到下拉选项上，很可能在第一次点击后，DOM结构被动态修改（比如替换了下拉内容），导致后续的事件绑定直接失效。

修复方案：用事件委托来绑定事件，把事件绑定到静态的父元素（比如.dropdown或者更上层不会被替换的元素），而不是直接绑定到动态的选项上。示例代码：

// 错误写法：直接绑定到选项，DOM变更后失效
$('.dropdown-menu li a').click(function() {
  // 你的值变更逻辑
});

// 正确写法：事件委托，绑定到静态父元素
$('.dropdown').on('click', '.dropdown-menu li a', function() {
  var selectedValue = $(this).text(); // 也可以用data属性获取值，比如$(this).data('value')
  // 更新下拉按钮的显示文本（示例逻辑）
  $(this).closest('.dropdown').find('.dropdown-toggle').text(selectedValue);
});

2. 下拉菜单状态异常，未正确初始化 #

有些时候手动修改了下拉菜单的display属性，或者调用了错误的方法，导致Bootstrap的Dropdown组件状态混乱，后续点击无法触发事件。

修复方案：尽量用Bootstrap官方提供的方法控制下拉菜单，比如$('.dropdown').dropdown('toggle')，不要手动修改CSS。如果确实需要手动操作DOM，记得重新初始化组件：

// 重新初始化Dropdown组件，恢复正常状态
$('.dropdown').dropdown();

3. 自定义逻辑阻止了事件冒泡 #

如果你的点击事件处理函数里用了event.stopPropagation()或者return false，可能会打断Bootstrap Dropdown的默认事件流程，导致后续无法正常触发。

修复方案：检查事件处理函数，移除不必要的event.stopPropagation()；如果确实需要阻止冒泡，确保只针对特定元素，别影响Dropdown的核心事件：

$('.dropdown-menu li a').click(function(event) {
  // 除非真的需要，否则别加这个
  // event.stopPropagation(); 
  var selectedValue = $(this).data('value');
  // 处理值变更逻辑
  $(this).closest('.dropdown').find('.dropdown-toggle').text(selectedValue);
  // 手动关闭下拉菜单（如果需要）
  $(this).closest('.dropdown').dropdown('toggle');
});

4. 重复初始化Dropdown组件 #

如果在页面加载后多次调用$('.dropdown').dropdown()，会导致组件状态混乱，第一次点击后后续事件直接失效。

修复方案：确保只初始化一次Dropdown组件，通常放在$(document).ready()里执行一次即可：

$(document).ready(function() {
  // 只初始化一次，避免状态混乱
  $('.dropdown').dropdown();
});

如果你的代码里还有特殊逻辑（比如动态生成下拉选项），可以补充完整代码细节，但上面这几个情况是最常见的，应该能解决大部分问题。

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