Bootstrap 5 Modal - 不適用於 jQuery（但可以使用 JavaScript）

Question

我試圖弄清楚為什么我的 Bootstrap 5 Modal Event 似乎只在我使用純 JavaScript 時觸發（例如 addEventListener show.bs.modal），但是當我在 jQuery 中嘗試同樣的事情時事件不會觸發。

    var myModal = document.getElementById('detailModal')
    myModal.addEventListener('show.bs.modal', function (event) {
        alert("I show correctly when the Modal opens!")
    })

    $('#detailModal').on('show.bs.modal', function (event) {

        alert('I do not show...');
    })

    // Also does not work...
    $('#detailModal').modal('show');

這可能是因為我使用 Webpack 來包含 Bootstrap/jQuery 庫（我是一個完全的 Webpack 初學者）。 Webpack 配置文件如下...

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"
        })
    ]
}

因為使用純 JavaScript 進行引用是有效的，所以我可以繼續這樣做，但我擔心它不能與 jQuery 一起使用可能表明我做錯了其他事情（Webpack 的配置或其他）。

Answer 1

我在如何使用 Webpack 在 ES6 項目中加載 Bootstrap 5 jQuery 插件中找到了答案？ .

事實證明，Bootstrap 5 會檢查 jQuery 是否存在於window對象中（詳細信息在Still want to use jQuery? It's possible! ），所以在我的 Webpack 入口 JavaScript 文件中，我添加了以下內容。

import $ from "expose-loader?exposes=$,jQuery!jquery";
window.jQuery = $;

嘿，它現在可以工作了，在使用 Webpack 時可能有更好的方法來做到這一點。 但這至少可以解釋為什么它最初無法正常工作並使其現在“足夠好”地工作......