Bootstrap 5.3下拉事件无法在jQuery .on中触发的问题求助

你的问题核心在于Bootstrap 5模块化导入时未启用jQuery事件桥接：

• 测试Demo里用的bootstrap.bundle.min.js已经内置了jQuery事件适配逻辑，所以jQuery绑定的事件能正常触发；
• 但你项目里是单独导入Bootstrap的各个组件源码，此时Bootstrap没有检测到全局的jQuery，只会触发原生CustomEvent，而jQuery的.on()无法捕获这种未经过桥接的Bootstrap事件。

两种解决办法 #

方法一：改用完整Bootstrap Bundle导入 #

把所有单独的Bootstrap组件导入替换成包含jQuery桥接的完整bundle：

// load jquery
import $ from 'jquery';
// 替换所有单独组件导入为这一行
import 'bootstrap/dist/js/bootstrap.bundle.js';
// 别忘了导入CSS
import 'bootstrap/dist/css/bootstrap.min.css';

$(document).ready(function() {
    $("#mydropdown").on('show.bs.dropdown', function() {
      console.log('jquery hit!');
    });
});

方法二：手动让Bootstrap检测到jQuery #

如果不想替换导入方式，在导入Bootstrap组件前，把jQuery挂载到全局对象上，让Bootstrap识别并启用jQuery事件桥接：

// load jquery
import $ from 'jquery';
// 挂载到全局，让Bootstrap能检测到
window.jQuery = $;
window.$ = $;

// 再导入Bootstrap各个组件
import 'bootstrap/js/src/alert';
import 'bootstrap/js/src/base-component';
// ... 其他组件导入

$(document).ready(function() {
    $("#mydropdown").on('show.bs.dropdown', function() {
      console.log('jquery hit!');
    });
});

原理是：Bootstrap 5在初始化组件时，会检查全局是否存在jQuery对象，如果存在，就会自动把组件的原生事件包装成jQuery兼容的事件，这样jQuery的.on()就能正常捕获到show.bs.dropdown这类事件了。

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