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

je suis en utilisant le modal exemple à partir du bootstrap 3 docs. le modal œuvres. cependant j'ai besoin pour accéder au salon.bs.modale de l'événement quand il se déclenche. pour l'instant, je suis juste en train:

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

Rien ne se passe, le cas ne se déclenche pas. Ce que je fais mal??? Cela ne fait pas de sens pour moi.

InformationsquelleAutor m4rlo | 2013-10-09

81

utiliser ceci:
```
$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
```
- Cela a résolu mon problème. Mais je l'ai placé à l'extérieur du document.prêt de la fonction. Quand je l'ai mis dans le document.prêt, Il ne fonctionnait pas. Pourrait aider quelqu'un.
- Ce doit être la accepté de répondre comme il fonctionne parfaitement avec créé dynamiquement en ajax des modaux via $(data).modal('show');.
- Ce serait d'incendie pour chaque modal que vous avez sur le document. Pour cibler uniquement modal particulier vous pouvez utiliser $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id ici provient de <div class="modal fade" id="my-modal-id">
- Non, ce ne serait pas, la deuxième argument est le sélecteur qui spécifie l'élément.
InformationsquelleAutor ali
74

Assurez-vous de mettre votre on('shown.bs.modal') avant l'instanciation de la modale de la pop
```
$("#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');
```
De se concentrer sur un domaine, il est préférable d'utiliser le shown.bs.modal en place de show.bs.modal mais peut-être pour d'autres raisons, vous voulez quelque chose à cacher l'arrière-plan ou de mettre quelque chose juste avant le modal commence à se montrer, utiliser le show.bs.modal fonction.
- là où vous les créez, vous devez lier les événements. `var amodal = $("<div modal... />"); amodal.sur(...,mafonction).modal('show');
- Vous n'avez pas à lier les événements si vous utilisez $(document).on().
- ^Cela résout mon problème. Aussi, show.bs.modal est différente de shown.bs.modal. L'ancien déclenche lorsque le modal est sur le point de montrer. Le second, quand il a été démontré. Big différents.
InformationsquelleAutor Pierre
16

Envelopper votre fonction dans $(document).ready(function() {, ou, plus simplement, $(function() {. En CoffeeScript, ce serait semblable à
```
$ ->
  $('#myModal').on 'show.bs.modal', (event)->
```
Sans elle, le JavaScript est exécuté avant que le document est chargé, et #myModal ne fait pas partie du DOM encore. Voici la Bootstrap de référence.

InformationsquelleAutor Chloe
10

Essayer cette
```
$('#myModal').on('shown.bs.modal', function () {
   alert('hi');
});
```
À l'aide de shown au lieu de show aussi assurez-vous d'avoir votre semi-points à la fin de votre fonction et d'alerte.
- Les deux 'montrer.bs.modal " et " montré.bs.modal " doit travailler pour mes fins, ils sont répertoriés comme valide événements dans le bootstrap docs. ne fonctionne toujours pas.
- Avez-vous vérifié que votre jQuery est de travail par exemple, $(document).ready(function(){alert('test');});
- oui si j'ai mis une alerte à l'extérieur de l'événement à afficher, juste à l'intérieur du document.prêt, alors qu'il tire.
- Essayez de faire un exemple de code ici bootply.com/new et voir si cela fonctionne. Si cela ne fonctionne pas partager votre lien et je peux prendre un coup d'oeil.
- Assurez-vous d'avoir votre bootstrap.js fichier chargé.
- merci pour votre aide trevor -- c'est rly encore un mystère pour moi: pourquoi ça ne marche pas. tout sur mon site, tout comme dans votre exemple. et j'ai beaucoup d'expérience avec jquery/bootstrap. quelque chose de bizarre et de sous-jacents doivent être en cours, mais je ne sais même pas où chercher.
- bootstrap.js est certainement chargé
- Ok pas de problème, vous pouvez partager votre code html et ou une page web si vous pensez que cela peut aider. Bonne chance à comprendre ce qui se passe.
- bien sûr, ici, c'est le site dev - il n'est pas nettoyé donc abstraction de beaucoup de -- la seule chose dont je me soucie, c'est que le alert('salut') de travail lorsque le modal est tiré. j'ai juste inséré l'exemple de test.
- L'URL demandée /gunnar_bootstrap/didyouseethis/js/application.js n'a pas été trouvée sur ce serveur.
- Il est de référencement application.js deux fois dans son html l'un d'eux est de charger le fichier correct. L'autre il ne l'est pas.. Serait-ce la cause du problème?
- Merci @Trevor. Il a travaillé pour moi aussi. J'ai été y compris 2 jquery.js. :-p
InformationsquelleAutor Trevor
9
```
$(document).on('shown.bs.modal','.modal', function () {

///TODO EVENTS

});
```
- en quelque sorte, c'était le plus utile de répondre pour moi. il semble que le travail avec .modal au lieu de référencer les auxiliaires modaux id a la solution... merci!
- C'est la meilleure réponse, car elle est non spécifique et déclenche sur tout modal montré plutôt que quand un jeu modal des déclencheurs.
InformationsquelleAutor Zeekoi Inc.
6

Chose de similaire qui m'est arrivé et je l'ai résolu en utilisant setTimeout.

Bootstrap est l'aide de l'délai suivantes pour compléter montrant:

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

Donc l'utilisation de plus de 300 doit travailler et pour moi 200 de travail:
```
$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
```
- C'est ce que je cherchais! Merci de préciser la durée de la transition de l'amorçage! Bravo 😀 Même 150 marche aussi 🙂
InformationsquelleAutor itsazzad
3

J'ai eu un semblable, mais le problème est différent et toujours incapables de travailler lorsque j'utilise $('#myModal'). J'ai été capable de le faire quand j'utilise $(window).

Mon autre problème est que j'ai trouvé que le spectacle de l'événement ne serait pas le feu si j'ai stocké mon modal div contenu html dans une variable javascript comme.
```
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});
```
l'événement jamais congédié parce qu'il n'a pas eu lieu

mon correctif a été d'inclure des 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>
```
InformationsquelleAutor wjfinder77
3

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

InformationsquelleAutor Iúri Batista Teles

Ajouter ceci:

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

InformationsquelleAutor zaarour

Dans mon cas, j'ai été absent de la .modale de dialogue div

N'est pas le feu de l'événement: illustré.bs.modal

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

Ne le feu de l'événement: illustré.bs.modal

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

InformationsquelleAutor aeroson

2

De s'assurer que vous êtes le chargement de jQuery avant d'utiliser Bootstrap. Les sons de base, mais j'ai eu des problèmes de capture de ces modale des événements et s'avère l'erreur n'était pas avec mon code, mais que j'étais chargement Bootstrap avant de jQuery.

InformationsquelleAutor travelsize
2

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 les mettre un message d'alerte avant de la ligne pour voir s'il est produit lors du chargement de la page. Pour résoudre éliminer JSs ci-dessus pour voir le quel est le problème

2) un Autre problème est que si vous chargez le JS dans le mauvais ordre. Par exemple, vous pouvez avoir la $('#myModal').on('show.bs.modal'...) partie avant de les charger JQuery.js. Dans ce cas, votre appel sera pas pris en compte, en premier dans le code HTML (afficher la source de la page pour être sûr) vérifier si le lien de script de JQuery est au-dessus de votre modal onShow appel, sinon elle sera ignorée. Pour résoudre les mettre un message d'alerte à l'intérieur du spectacle, un avant. Si vous voyez un avant et non pas l'un à l'intérieur de la onShow fonction, il est clair que la fonction ne peut pas s'exécuter. Si l'orthographe est juste plus que probable que votre appel à l'JQuery.js n'est pas fait ou elle est faite après l' onShow partie
- Cela m'a aidé à - $('#myModal').on('show.bs.modal'...) doit être après JQuery est chargé. Merci!
InformationsquelleAutor Marius
0

Dans mon cas, le problème était de savoir comment travelsize commentaire.. L'ordre des importations entre bootstrap.js et jquery. Parce que je suis en utilisant le modèle de Metronic et ne vérifie pas avant de

InformationsquelleAutor Gregorio Centurión
0

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

Gaspillé trop de temps de façon à ce...

InformationsquelleAutor Didier Kernwein
0

j'ai utilisé jQuery événement de la délégation /bouillonnante... qui a fonctionné pour moi. Voir ci-dessous:
```
$(document).on('click', '#btnSubmit', function () {
                alert('hi loo');
            })
```
très bonne info également: https://learn.jquery.com/events/event-delegation/

InformationsquelleAutor Samuel Darteh
-1

Ci-dessous sont les détails granulaires:

spectacle.bs.modal fonctionne alors que le modèle de boîte de dialogue de chargement
montré.bs.modal travaillé pour faire quelque chose après le chargement. post rendu

InformationsquelleAutor Anand

Vous devez vous connecter pour publier un commentaire.