web-dev-qa-db-fra.com

bootstrap L'événement jquery show.bs.modal ne se déclenche pas

j'utilise l'exemple modal du bootstrap 3 docs. le modal fonctionne. Cependant, je dois accéder à l'événement show.bs.modal quand il se déclenche. pour l'instant j'essaie juste: 

$('#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. 

modal-dialogtwitter-bootstrap-3jquery
57
m4rlo

Assurez-vous de mettre votre on('shown.bs.modal') avant d'instancier le modal pour qu'il apparaisse

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });

ou

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
}).modal('show');

Pour vous concentrer sur un champ, il est préférable d’utiliser le shown.bs.modal au lieu de show.bs.modal, mais pour d’autres raisons, vous souhaitez masquer l’arrière-plan ou définir quelque chose juste avant que le modal ne commence à apparaître, utilisez la fonction show.bs.modal.

68
Pierre

utilisez ceci:

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

Enveloppez votre fonction dans $(document).ready(function() {, ou plus simplement, $(function() {. Dans CoffeeScript, cela ressemblerait à

$ ->
  $('#myModal').on 'show.bs.modal', (event)->

Sans cela, JavaScript s'exécute avant le chargement du document et #myModal ne fait pas encore partie du DOM. Voici la référence Bootstrap .

17
Chloe

Essaye ça

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

En utilisant shown au lieu de show, assurez-vous également que vos points-virgules sont à la fin de votre fonction et de votre alerte.

8
Trevor
$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});
6
Zeekoi Inc.

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 doit fonctionner, et pour moi 200, cela fonctionne:

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
5
itsazzad

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

3
Iúri Batista Teles

Dans mon cas, il me manquait le div .modal-dialog

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

<div id="loadingModal" class="modal fade">
  <p>Loading...</p>
</div>

Est-ce que l'événement feu: shown.bs.modal

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">      
    <p>Loading...</p>
  </div>
</div>
3
aeroson

J'ai eu un problème similaire mais différent et je ne pouvais toujours pas travailler lorsque j'utilise $ ('# myModal'). Je pouvais le faire fonctionner lorsque j'utilisais $ (window).

Mon autre problème est que j'ai constaté que l'événement show ne se déclencherait pas si je stockais mon contenu modal div html dans une variable javascript telle que. 

var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});

l'événement n'a jamais tiré parce qu'il ne s'est pas produit 

ma solution était d'inclure les divs dans le corps html

<body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>
3
wjfinder77

Assurez-vous de charger jQuery avant d’utiliser Bootstrap. Cela semble simple, mais j’ai eu du mal à saisir ces événements modaux et il s’est avéré que l’erreur n’était pas liée à mon code mais au chargement de Bootstrap avant jQuery.

2
travelsize

Ajoute ça:

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});
2
zaarour

Parfois, cela ne fonctionne pas si:

1) vous avez une erreur dans le code de script Java avant votre ligne avec $('#myModal').on('show.bs.modal'...). Pour résoudre ce problème, placez un message d’alerte avant la ligne pour savoir s’il apparaît lorsque vous chargez la page. Pour résoudre éliminer les JS ci-dessus pour voir quel est le problème

2) Un autre problème est que vous chargez le JS dans le mauvais ordre. Par exemple, vous pouvez avoir la partie $('#myModal').on('show.bs.modal'...) avant de charger JQuery.js. Dans ce cas, votre appel sera ignoré. Vérifiez donc tout d'abord si le lien de script vers JQuery est au-dessus de votre appel modal onShow dans HTML (sinon, il sera ignoré. Pour résoudre ce problème, placez une alerte à l’intérieur du spectacle. Si vous voyez celui qui précède et non celui qui se trouve dans la fonction onShow, il est clair que la fonction ne peut pas être exécutée. Si l'orthographe est correcte, votre appel à JQuery.js n'est pas effectué ou il est passé après la partie onShow

1
Marius

Dans mon cas, le problème était comment travelsize comment .. L'ordre des importations entre bootstrap.js et jquery. Parce que j'utilise le modèle Metronic et ne vérifie pas avant

0
Gregorio Centurión

Voici les détails granulaires:

show.bs.modal fonctionne pendant le chargement du dialogue de modèle. post rendu

0
Anand

Assurez-vous que vous utilisez vraiment le modal bootstrap jquery et pas un autre modal jquery.

Beaucoup trop de temps perdu sur ce ...

0
Didier Kernwein