bootstrap jquery show.bs.modal-Ereignis wird nicht ausgelöst

ich bin mit dem modalen Beispiel von bootstrap 3 docs. der modal-Werke. allerdings brauche ich Zugriff auf die Karte.bs.modal-Ereignis, wenn es ausgelöst wird. jetzt bin ich gerade versucht:

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

Nichts passiert, wird das Ereignis nicht ausgelöst. Was mache ich falsch??? Das ergibt keinen Sinn für mich.

InformationsquelleAutor der Frage m4rlo | 2013-10-09

61

Stellen Sie sicher, Sie setzen Ihre on('shown.bs.modal') vor dem instanziieren der modalen pop-up -
```
$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });
```
oder
```
$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
}).modal('show');
```
Den Fokus auf ein Feld, es ist besser, um die shown.bs.modal statt show.bs.modal aber vielleicht für andere Gründe, die Sie ausblenden möchten, etwas, das der hintergrund oder etwas rechts vor dem modal beginnt zu zeigen, verwenden Sie die show.bs.modal Funktion.

InformationsquelleAutor der Antwort Pierre

verwenden:

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

InformationsquelleAutor der Antwort ali

15

Wickeln Sie Ihre Funktion in $(document).ready(function() { oder einfach $(function() {. In CoffeeScript, sähe
```
$ ->
  $('#myModal').on 'show.bs.modal', (event)->
```
Ohne es, das JavaScript ausgeführt wird, bevor das Dokument geladen wird, und #myModal ist nicht Teil des DOM-noch. Hier ist die Bootstrap-Referenz.

InformationsquelleAutor der Antwort Chloe
8

Versuchen, diese
```
$('#myModal').on('shown.bs.modal', function () {
   alert('hi');
});
```
Mit shown statt show auch sicherstellen, dass Sie Ihre semi Doppelpunkte am Ende von Ihrer Funktion und Alarm.

InformationsquelleAutor der Antwort Trevor
5

Ähnliche Sache passiert und habe mich gelöst mit setTimeout.

Bootstrap ist mit den folgenden timeout zu vervollständigen, zeigen:

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

Also mit mehr als 300 arbeiten muss und für mich 200 arbeitet:
```
$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
```
InformationsquelleAutor der Antwort itsazzad

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

///TODO EVENTS

});

InformationsquelleAutor der Antwort Zeekoi Inc.

4

Hatte ich ein ähnliches, aber anderes problem und noch nicht in der Lage zu arbeiten, wenn ich $('#myModal'). Ich war in der Lage, um es arbeiten und wenn ich mit $(window).

Mein anderes problem ist, dass ich fand, dass die Veranstaltung würde nicht ausgelöst, wenn ich gespeicherte meine modal div html-Inhalt in eine javascript-variable wie.
```
var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});
```
das Ereignis nie ausgelöst wird, da es nicht auftreten

mein fix war zu umfassen, die divs in der html-Körper
```
<body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>
```
InformationsquelleAutor der Antwort wjfinder77
3

Denken Sie daran, dass das script nach dem Aufruf von "js/bootstrap" nicht vor.

InformationsquelleAutor der Antwort Iúri Batista Teles
2

Sicherzustellen, dass Sie laden jQuery, bevor Sie die Verwendung von Bootstrap. Klingt einfach, aber ich hatte Probleme fangen diese modale Ereignisse, und stellt sich heraus, der Fehler war nicht mit meinem code, doch ich war laden von Bootstrap vor jQuery.

InformationsquelleAutor der Antwort travelsize

In meinem Fall, die mir fehlte, die .modal-dialog div

Nicht Feuer-event: gezeigt.bs.modal

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

Macht Feuer-event: gezeigt.bs.modal

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

InformationsquelleAutor der Antwort aeroson

0

Nachfolgend werden die granularen details:

zeigen.bs.modal arbeitet, während Modell-dialog laden
dargestellt.bs.modal gearbeitet, um jedes Ding nach dem laden. post-rendering

InformationsquelleAutor der Antwort Anand

Hinzufügen:

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

InformationsquelleAutor der Antwort zaarour

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.