Bootstrap 5 Modal - not working with Jquery (but ok with Javascript)-CodePudding

I am trying to figure out why my bootstrap 5 Modal Event only seems to fire when I use pure JS (addEventListener show.bs.modal for example) but when I try the same thing in JQuery the event doesn't fire.

    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');

It maybe because of my use of Webpack to include the Bootstrap/JQuery libraries (I am a total WebPack beginner). Webpack config file below...

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

Because referencing with pure JS works I can continue with that but I am concerned that it not working with JQuery could be a sign that I am doing something else wrong (either configuration of Webpack or otherwise).

CodePudding user response：

Found the answer here How do I load the Bootstrap 5 jQuery plugins in an ES6 project using webpack?

So turns out that Bootstrap 5 checks if jQuery exists in the window object (details on that here https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible) so in my webpack entry js file I added the following...

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

and hey presto it now works! There maybe better ways of doing this while using WebPack (please comment if there is) but this does at least explain why it wasn't working initially and makes it work "good enough" for now...

CodePudding user response：

Sorry I can't add comments due to having low reputation so I have to post an answer. Are you sure you checked the whole thread? I'm copying Mister Verleg's answer from there, perhaps this will help;

Most often, when $('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work.

Remove one of the links to make it work again.

Furthermore, some plugins cause errors too, in this case add

jQuery.noConflict(); 
$('#myModal').modal('show');