Bootstrap 5 Modal -不能使用jQuery(但可以使用JavaScript)

Question

我想弄清楚为什么我的Bootstrap 5模态事件似乎只有在我使用纯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

我在中找到了答案，如何在ES6项目中使用Webpack加载Bootstrap 5 jQuery插件?.

事实证明，Bootstrap 5检查是否jQuery存在于窗口对象(详细信息在还想使用jQuery?)，所以在我的Webpack条目JavaScript文件中，我添加了以下内容:

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

嘿，现在它工作了!在使用Webpack时，可能有更好的方法来做到这一点，但这至少解释了为什么它最初不能工作，并使它工作得"足够好"。现在…