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

Cela se produit lorsque le code pourrait avoir été exécuté auparavant et ne s'affiche pas, vous pouvez donc ajouter timeout() pour qu'il se déclenche.

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });

Answer 2

J'ai rencontré un problème similaire mais différent et je n'arrive toujours pas à le résoudre lorsque j'utilise $('#myModal'). J'ai réussi à le faire fonctionner en utilisant $(window).

Mon autre problème est que j'ai constaté que l'événement show ne se déclenchait pas si je stockais le contenu html de ma div modale dans une variable javascript comme :

var contenu="

`L'événement ne se déclenchait jamais car il ne se produisait pas

Ma solution a été d'inclure les divs dans le corps du html

       ...

        $('#myModal').modal();
        $(window).on('show.bs.modal', function (e) {
            alert('test de lancement');
        });`

Answer 3

N'oubliez pas de placer le script après l'appel de "js/bootstrap", pas avant.

Answer 4

Assurez-vous de charger jQuery avant d'utiliser Bootstrap. Cela peut sembler basique, mais j'avais des problèmes pour capturer ces événements modaux et il s'est avéré que l'erreur ne venait pas de mon code mais du fait que je chargeais Bootstrap avant jQuery.

Answer 5

Parfois cela ne fonctionne pas si :

1) vous avez une erreur dans le code java script avant votre ligne avec $('#myModal').on('show.bs.modal'...). Pour résoudre le problème, mettez un message d'alerte avant la ligne pour voir s'il s'affiche lorsque la page se charge. Pour résoudre le problème, éliminez les JS ci-dessus pour voir lequel pose problème

2) Un autre problème est si vous chargez les JS dans le mauvais ordre. Par exemple, vous pouvez avoir la partie $('#myModal').on('show.bs.modal'...) avant de charger réellement JQuery.js. Dans ce cas, votre appel sera ignoré, donc en premier dans le HTML (consultez le code source de la page pour être sûr) vérifiez si le lien vers le script JQuery se trouve au-dessus de votre appel modal onShow, sinon il sera ignoré. Pour résoudre le problème, mettez une alerte à l'intérieur de l'élément on show et une avant. Si vous voyez celle d'avant et pas celle à l'intérieur de la fonction onShow, il est clair que la fonction ne peut pas s'exécuter. Si l'orthographe est correcte, il est très probable que votre appel à JQuery.js n'a pas été effectué ou qu'il a été effectué après la partie onShow