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

82

Ich verwende das modale Beispiel aus den Bootstrap 3-Dokumenten. Das Modal funktioniert. Ich muss jedoch auf das Ereignis show.bs.modal zugreifen, wenn es ausgelöst wird. im Moment versuche ich nur:

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

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

modal-dialog twitter-bootstrap-3 jquery m4rlo
quelle

Antworten:

102

benutze das:

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})
Ali
quelle
8
Dies löste mein Problem. Aber ich habe es außerhalb der Funktion document.ready platziert. Als ich in document.ready platzierte, funktionierte es nicht. Könnte jemandem helfen.
Harish Chinju
2
Dies sollte die akzeptierte Antwort sein, da es perfekt mit dynamisch erstellten Ajax-Modalen über funktioniert $(data).modal('show');.
kjdion84
2
Dies würde für jedes Modal ausgelöst, das Sie im Dokument haben. Um nur auf bestimmte Modalitäten abzuzielen, können Sie diese verwenden $(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. Id hier kommt von<div class="modal fade" id="my-modal-id">
przno
2
@przno Nein, würde es nicht, das zweite Argument ist der Selektor, der das Element angibt.
Tom
Wenn Sie verwenden $(document).on(..., hängen Sie Ihren Listener an den Dokumentkontext an , und es spielt keine Rolle, ob Ihre Zielelemente vorhanden sind oder nicht. Sie sollten den Ereignisnamen als erstes Argument und die Rückruffanction als letztes hinzufügen, aber Sie können einen Abfrageselektor als zweites Argument hinzufügen
Ali
81

Stellen Sie sicher, dass Sie Ihre setzen, on('shown.bs.modal')bevor Sie das Modal zum Popup instanziieren

$("#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');

Um sich auf ein Feld zu konzentrieren, ist es besser, das shown.bs.modalanstelle von zu verwenden, show.bs.modalaber vielleicht aus anderen Gründen, wenn Sie etwas im Hintergrund verbergen oder etwas einstellen möchten, bevor das Modal angezeigt wird, verwenden Sie die show.bs.modalFunktion.

Pierre
quelle
@ kjdion84 - dort, wo Sie sie erstellen, sollten Sie die Ereignisse binden. `var amodal = $ (" <div modal ... /> "); amodal.on (..., myfunc) .modal ('show');
Pierre
Sie müssen keine Ereignisse binden, wenn Sie verwenden $(document).on().
kjdion84
2
^ Das löst mein Problem. Auch show.bs.modalist anders als shown.bs.modal. Ersteres wird ausgelöst, wenn das Modal angezeigt wird. Letzteres, wenn es gezeigt wurde. Ganz anders.
Yukio Fukuzawa
@Pierre was bedeutet das show.bs.modal?
KUMAR
@KUMAR ist das Ereignis, das Bootstrap beim Aufruf aufruft .modal('show'). Es gibt vier Veranstaltungen für modals ruft: [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - Show ist , wenn es zeigen , wird gezeigt , wenn es angezeigt wird , das gleiche für Haut und versteckt. getbootstrap.com/docs/3.4/javascript/#modals-events
Pierre
17

Wickeln Sie Ihre Funktion in $(document).ready(function() {oder einfacher ein $(function() {. In CoffeeScript würde dies so aussehen

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

Ohne sie wird das JavaScript ausgeführt, bevor das Dokument geladen wird, und #myModalist noch nicht Teil des DOM. Hier ist die Bootstrap-Referenz .

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

/// TODO EVENTS

});
Zeekoi Inc.
quelle
2
Irgendwie war das die hilfreichste Antwort für mich. Es scheint, .modalals wäre es die Lösung , mit zu arbeiten, anstatt auf die Modal-ID zu verweisen ... danke!
Mabu
Dies ist die beste Antwort, da sie nicht spezifisch ist und bei jedem angezeigten Modal ausgelöst wird und nicht nur, wenn nur ein festgelegtes Modal ausgelöst wird.
IDED
9

Versuche dies

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

Verwenden Sie shownstatt showauch sicherzustellen, dass Sie Ihre Semikolons am Ende Ihrer Funktion und Alarm haben.

Trevor
quelle
7
Sowohl 'show.bs.modal' als auch 'selected.bs.modal' sollten für meine Zwecke funktionieren. Beide werden in den Bootstrap-Dokumenten als gültige Ereignisse aufgeführt. funktioniert immer noch nicht.
m4rlo
1
Haben Sie überprüft, ob Ihre jQuery funktioniert, z. B. $ (document) .ready (function () {alert ('test');});
Trevor
Ja, wenn ich eine Warnung außerhalb des Show-Ereignisses, nur innerhalb von document.ready, platziere, wird sie ausgelöst.
m4rlo
1
@BassJobsen Er verweist zweimal auf application.js in seinem HTML-Code. Einer von ihnen lädt die richtige Datei. Der andere ist nicht gefunden. Würde das das Problem verursachen?
Trevor
1
Danke @Trevor. Es hat auch bei mir funktioniert. Ich habe 2 jquery.js aufgenommen. :-p
Akshay Vishnoi
7

Füge das hinzu:

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

Ähnliches ist mir passiert und ich habe es mit setTimeout gelöst.

Bootstrap verwendet das folgende Zeitlimit, um die Anzeige abzuschließen:

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

Die Verwendung von mehr als 300 muss also funktionieren und für mich funktionieren 200:

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})
itsazzad
quelle
1
Das habe ich gesucht! Vielen Dank für den Hinweis auf die Übergangsdauer des Bootstraps! Kudos: D Auch 150 funktioniert auch :)
ShellZero
4

In meinem Fall fehlte mir das .modal-dialog div

Feuert kein Ereignis ab: selected.bs.modal

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

Feuert ein Ereignis an: gezeigt.bs.modal

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

Ich hatte ein ähnliches, aber anderes Problem und konnte immer noch nicht arbeiten, wenn ich $ ('# myModal') verwende. Ich konnte es zum Laufen bringen, wenn ich $ (Fenster) benutze.

Mein anderes Problem ist, dass ich festgestellt habe, dass das Show-Ereignis nicht ausgelöst wird, wenn ich meinen modalen div-HTML-Inhalt in einer Javascript-Variablen wie gespeichert habe. 

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

Das Ereignis wurde nie ausgelöst, weil es nicht aufgetreten ist

Mein Fix war, die Divs in den HTML-Body aufzunehmen

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

Denken Sie daran, das Skript nach dem Aufruf von "js / bootstrap" zu setzen, nicht vorher.

Iúri Batista Teles
quelle
2

Stellen Sie sicher, dass Sie jQuery laden, bevor Sie Bootstrap verwenden. Klingt einfach, aber ich hatte Probleme beim Abfangen dieser modalen Ereignisse und es stellte sich heraus, dass der Fehler nicht bei meinem Code lag, sondern dass ich Bootstrap vor jQuery geladen habe.

Reisegröße
quelle
2

Manchmal funktioniert das nicht, wenn:

1) Sie haben einen Fehler im Java-Skriptcode vor Ihrer Zeile mit $('#myModal').on('show.bs.modal'...). Um Fehler zu beheben, setzen Sie eine Warnmeldung vor die Zeile, um festzustellen, ob sie beim Laden der Seite angezeigt wird. Um dies zu beheben, entfernen Sie die oben genannten JSs, um festzustellen, welches das Problem ist

2) Ein weiteres Problem ist, wenn Sie das JS in falscher Reihenfolge laden. Beispielsweise können Sie das $('#myModal').on('show.bs.modal'...)Teil haben, bevor Sie JQuery.js tatsächlich laden. In diesem Fall wird Ihr Aufruf ignoriert. Überprüfen Sie daher zunächst im HTML-Code (um sicherzugehen, dass die Seitenquelle angezeigt wird), ob sich der Skriptlink zu JQuery über Ihrem modalen onShowAufruf befindet. Andernfalls wird er ignoriert. Um Fehler zu beheben, geben Sie eine Warnung in die On-Show ein. Wenn Sie die vorherige und nicht die in der onShow-Funktion sehen, ist klar, dass die Funktion nicht ausgeführt werden kann. Wenn die Schreibweise mehr als wahrscheinlich ist, erfolgt Ihr Aufruf von JQuery.js nicht oder nach dem onShowTeil

Marius
quelle
Dies hat mir geholfen - $('#myModal').on('show.bs.modal'...)muss sein, nachdem JQuery geladen wurde. Vielen Dank!
Ian Wold
2

Ich hatte das gleiche Problem mit bootstrap4. Die Lösung bestand darin, es in die Funktion jQuery document ready () einzufügen:

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

Stellen Sie sicher, dass Sie wirklich das Bootstrap- JQuery-Modal und kein anderes JQuery-Modal verwenden.

Viel zu viel Zeit damit verschwendet ...

Didier Kernwein
quelle
1

Hatte das gleiche Problem. Für mich war es, dass ich jquery zweimal in dieser Reihenfolge geladen habe:

  1. Geladene jQuery
  2. Geladener Bootstrap
  3. JQuery erneut geladen

Als jQuery das zweite Mal geladen wurde, wurden die Verweise auf Bootstrap irgendwie gebrochen und das Modal geöffnet, aber die on-Methode ('selected.bs ..') wurde nie ausgelöst.

d00d
quelle
0

In meinem Fall war das Problem, wie Travelize-Kommentar. Die Reihenfolge der Importe zwischen bootstrap.js und jquery. Weil ich die Vorlage Metronic verwende und vorher nicht überprüfe

Gregorio Centurión
quelle
0

Dies ist der Fall, wenn Code zuvor ausgeführt wurde und nicht angezeigt wird, sodass Sie timeout () für tp fire hinzufügen können.

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

Unten sind die detaillierten Details:

show.bs.modal funktioniert, während das Laden des Modelldialogs gezeigt wird .bs.modal hat nach dem Laden alles getan. Post-Rendering

Anand
quelle