Bootstrap 5中addEventListener与jQuery .on()的差异及模态框事件绑定失效问题

我想给Bootstrap 5的模态框添加事件监听，让它每次打开时执行特定操作。按照官方文档的纯JavaScript写法可以正常生效：

const myModalEl = document.getElementById('fast-modal')
myModalEl.addEventListener('show.bs.modal', event => {
  // do something...
})

我的模态框HTML结构如下：

<div class="modal fade" id="fast-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-complement" id="fast-result-box"></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

纯JS写法完全符合预期，但换成jQuery 3.6绑定相同事件时却没有效果，尝试了两种写法都不行：

$(document).on('show.bs.modal', '#fast-modal', function () {
    alert('hi');
})

// or

$('#fast-modal').on('show.bs.modal', function () {
    alert('xx');
})

为什么jQuery写法不生效？代码里哪里错了？

问题根源及解决办法 #

Bootstrap 5已完全移除jQuery依赖，它的模态框事件是基于原生JavaScript实现的自定义事件，这是导致jQuery监听失效的核心原因，结合具体场景的解决方式如下：

1. 代码执行时机错误
   如果jQuery代码在DOM元素加载完成前执行，$('#fast-modal')会找不到目标元素，直接导致事件绑定失败。解决方式是把代码放在$(document).ready()中，确保DOM渲染完成后再执行绑定：

$(document).ready(function() {
    $('#fast-modal').on('show.bs.modal', function () {
        alert('xx');
    })
})

2. Bootstrap 5事件的原生特性
   Bootstrap 5通过原生dispatchEvent触发自定义事件，虽然jQuery的.on()理论上能监听原生事件，但如果页面中同时引入了Bootstrap原生版本和jQuery兼容包，或存在事件命名空间冲突，会导致监听失效。这种情况下更推荐直接使用原生JS写法，既符合Bootstrap 5的设计逻辑，也能避免兼容问题。

3. 脚本冲突问题
   检查页面是否重复引入jQuery、Bootstrap，或有其他脚本阻止了事件触发，比如部分弹窗插件会覆盖模态框的默认事件逻辑。

内容的提问来源于stack exchange，提问作者José Victor