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

Ajoutez ceci :

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // FAIRE DES ÉVÉNEMENTS
    });
});

Answer 2

Une chose similaire m'est arrivée et j'ai résolu en utilisant setTimeout.

Bootstrap utilise le délai suivant pour terminer l'affichage :

c.TRANSITION_DURATION=300, c.BACKDROP_TRANSITION_DURATION=150,

Donc, utiliser plus de 300 devrait fonctionner et pour moi, 200 fonctionne :

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Faire quelque chose si nécessaire
    }, 300);                        
})

Answer 3

Dans mon cas, il manquait la div .modal-dialog

Ne déclenche pas l'événement : shown.bs.modal

  Chargement en cours...

Déclenche l'événement : shown.bs.modal

    Chargement en cours...

Answer 4

J'ai eu le même problème avec bootstrap4. La solution a été de l'ajouter à l'intérieur de la fonction jQuery document ready():

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

Answer 5

J'ai eu le même problème. Pour moi, c'était que j'ai chargé jQuery deux fois dans cet ordre :

1. J'ai chargé jQuery
2. J'ai chargé Bootstrap
3. J'ai chargé à nouveau jQuery

Quand jQuery a été chargé une deuxième fois, cela a en quelque sorte cassé les références à Bootstrap et le modal s'est ouvert mais la méthode on('shown.bs..') n'a jamais été déclenchée.