Bootstrap 5 Modal事件仅原生JS生效，jQuery无效问题求助

核心原因 #

Bootstrap 5默认不再依赖jQuery，官方版本的插件逻辑优先使用原生JS实现。如果要让Bootstrap的jQuery API（如$('#modal').modal()、on('show.bs.modal')）生效，必须确保Bootstrap能检测到全局的jQuery实例，并启用jQuery兼容模式。

具体解决步骤 #

1. 完善Webpack配置，暴露全局jQuery #

你的Webpack配置中已经用了ProvidePlugin，但缺少让Bootstrap识别的全局window.jQuery对象，补充后配置如下：

const path = require('path')
const webpack = require('webpack');

module.exports = {
    entry: {
        site: './JsSrc/main.js',
        reporttemplate: './JsSrc/ReportTemplateDetails.js'
    },
    output: {
        filename: '[name]compiled.js',
        path: path.resolve(__dirname, 'wwwroot','js')
    },
    mode: 'development',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(eot|woff(2)?|ttf|otf|svg)$/i,
                type: 'asset'
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery" // 新增这一行，让Bootstrap检测到全局jQuery
        })
    ]
}

2. 调整JS引入顺序 #

在你的入口JS文件（如main.js）中，必须先引入并暴露jQuery，再引入Bootstrap：

// 先引入jQuery并挂载到全局
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 再引入Bootstrap JS
import 'bootstrap';
// 若需要Popper.js支持，改用bundle版本：import 'bootstrap/dist/js/bootstrap.bundle.min.js';

3. 验证绑定有效性 #

引入完成后，可通过控制台验证Bootstrap是否已挂载到jQuery原型：

console.log($.fn.modal); // 输出function则说明绑定成功

4. 修正测试代码（确保DOM加载完成） #

将jQuery相关代码包裹在$(document).ready()中，避免DOM未加载时执行：

$(document).ready(function() {
    $('#detailModal').on('show.bs.modal', function (event) {
        alert('现在可以正常触发了！');
    });

    $('#detailModal').modal('show');
});

额外排查点 #

• 检查页面是否存在多个jQuery实例：比如同时通过CDN引入了jQuery，会和Webpack打包的实例冲突，导致Bootstrap绑定到了非当前使用的jQuery对象上。
• 确认Bootstrap版本：若误装了Bootstrap 4，配置逻辑会有差异，建议锁定Bootstrap 5版本。

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