Bootstrap jquery événement show.bs.modal ne se déclenchera pas

Question

Je suis en train d'utiliser l'exemple de modal des documents bootstrap 3. Le modal fonctionne. Cependant j'ai besoin d'accéder à l'événement show.bs.modal quand il se déclenche. Pour l'instant j'essaie simplement :

$('#myModal').on('show.bs.modal', function () {
alert('hi')
})

Rien ne se passe, l'événement ne se déclenche pas. Qu'est-ce que je fais mal ??? Cela n'a pas de sens pour moi.

Answer 1

Assurez-vous d'utiliser réellement le modal jquery bootstrap et non un autre modal jquery.

J'ai perdu tellement de temps là-dessus...

Answer 2

Dans mon cas, le problème était lié au commentaire travelsize.. L'ordre des imports entre bootstrap.js et jquery. Parce que j'utilise le modèle Metronic et je n'ai pas vérifié avant.

Answer 3

J'ai utilisé la délégation d'événements/bubbling de jQuery... cela a fonctionné pour moi. Voir ci-dessous:

$(document).on('click', '#btnSubmit', function () {
                alert('salut');
            })

très bon info aussi: https://learn.jquery.com/events/event-delegation/

Answer 4

La solution populaire consistant à utiliser un setTimeout peut fonctionner dans certains cas, mais c'est une solution terrible. Je l'utilisais moi-même en l'encadrant bien sûr de $(document).ready() (mais cela n'a jamais aidé), mais je n'ai jamais pu trouver une solution fiable. Certains navigateurs/systèmes prennent plus de temps que d'autres, et parfois 1000ms ne suffisait pas. Et j'étais fatigué de chercher pourquoi le $(document).ready() n'aidait pas, donc :

J'ai adopté une approche différente.

Je m'abonne aux événements modaux lorsque j'ai besoin d'utiliser le modal pour la première fois.

Ouvrir mon modal

et du côté JS :

function ShowModal() {
    InitModalEventsOnce();
    $('#MyModal').modal('show');
}

var InitModalEventsIsDone = false; // Drapeau pour suivre l'abonnement

function InitModalEventsOnce() {

    if (!InitModalEventsIsDone) {
        InitModalEventsIsDone = true;

        $('#MyModal').on('shown.bs.modal', function () {
            // quelque chose
        })

        $('#MyModal').on('hidden.bs.modal', function (e) {
            // quelque chose
        });
    }
}

Et c'est tout ! La seule solution fiable que j'ai trouvée.

Answer 5

Essayez comme ceci.

let mymodal=$('#myModal');
mymodal.on('show.bs.modal', function () 
{
    alert('salut')
});