Bootstrap 4导航栏nav-link事件问题：为何仅部分下拉项生效？

一、事件监听器的来源 #

Bootstrap 4 的下拉组件事件监听器是由其自带的 JavaScript 插件（dropdown.js，通常包含在bootstrap.js或bootstrap.min.js中）自动添加的。它会通过**数据属性（data-toggle="dropdown"）**识别需要绑定下拉功能的元素，为其添加点击事件监听器，实现下拉展开/收起的交互。

二、部分下拉项失效的原因 #

你遇到的情况，大概率是失效的下拉项是在 Bootstrap JS 初始化之后才动态渲染到页面中的。Bootstrap 默认只会在页面加载完成时，对已存在的 DOM 元素进行事件绑定，之后新增的元素不会自动触发绑定。

三、手动绑定事件的两种方法 #

方法1：手动初始化单个下拉元素 #

找到失效的下拉触发元素（比如你的Equipes对应的<a>标签），在它渲染完成后，调用 Bootstrap 提供的初始化方法：

// 可根据实际情况调整选择器，确保精准定位目标元素
$('.nav-link.dropdown-toggle[data-toggle="dropdown"]').dropdown();

这个方法会为目标元素手动绑定下拉所需的事件监听器。

方法2：使用事件委托（推荐） #

如果页面中有大量动态生成的下拉组件，可通过事件委托把事件绑定到父级静态元素上，后续新增的下拉元素也能正常触发功能：

// 选择页面加载时就存在的父级容器，比如导航栏的父元素 '.navbar'
$('.navbar').on('click', '[data-toggle="dropdown"]', function (e) {
  e.preventDefault();
  $(this).dropdown('toggle');
});

这种方式无需每次新增元素都手动初始化，更适合动态内容较多的场景。

补充说明 #

你在检查器中看到的“event标识”，是浏览器开发者工具用来标记元素已绑定事件监听器的标记。只有当 Bootstrap JS 成功为元素绑定事件后，才会显示这个标识。

内容的提问来源于stack exchange，提问作者D.Picard