webentwicklung-frage-antwort-db.com.de

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

ich verwende das modale Beispiel aus dem bootstrap 3 docs. die modalen Werke. Ich muss jedoch auf das show.bs.modal -Ereignis zugreifen, wenn es ausgelöst wird. vorerst versuche ich nur: 

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

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

57
m4rlo

Vergewissern Sie sich, dass Sie Ihre on('shown.bs.modal') setzen, bevor Sie die Modal-Instanz instanziieren, um das Popup-Fenster aufzurufen

$("#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, anstelle von shown.bs.modal den show.bs.modal zu verwenden. Vielleicht möchten Sie jedoch aus anderen Gründen etwas im Hintergrund verbergen oder etwas direkt vor dem Anzeigen des Modals einstellen, verwenden Sie die show.bs.modal-Funktion.

68
Pierre

benutze das:

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

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

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

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

17
Chloe

Versuche dies

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

Wenn Sie shown anstelle von show verwenden, stellen Sie außerdem sicher, dass sich Ihre Semikolons am Ende Ihrer Funktion und Warnung befinden.

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

/// TODO EVENTS

});
6
Zeekoi Inc.

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

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

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

Also mehr als 300 müssen funktionieren und für mich funktionieren 200:

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

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

3

In meinem Fall fehlte mir das .modal-dialog div

Feuert kein Ereignis ab: shown.bs.modal

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

Feuert ein Ereignis ab: shown.bs.modal

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

Ich hatte ein ähnliches, aber anderes Problem und kann immer noch nicht arbeiten, wenn ich $ ('# myModal') verwende. Ich konnte es funktionieren lassen, wenn ich $ (window) verwende.

Mein anderes Problem ist, dass ich herausfand, dass das Showereignis nicht ausgelöst würde, 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 stattgefunden hat 

mein Update bestand darin, 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>
3
wjfinder77

Stellen Sie sicher, dass Sie jQuery laden, bevor Sie Bootstrap verwenden. Hört sich einfach an, aber ich hatte Probleme, diese modalen Ereignisse abzufangen, und es stellte sich heraus, dass der Fehler nicht in meinem Code lag, sondern dass ich vor jQuery Bootstrap lade.

2
travelsize

Füge das hinzu:

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

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 vor der Zeile eine Warnmeldung, um zu sehen, ob diese beim Laden der Seite angezeigt wird. Um das Problem zu lösen, beseitigen Sie die oben genannten JSs, um herauszufinden, welches das Problem ist

2) Ein anderes Problem ist, wenn Sie den JS in falscher Reihenfolge laden. Sie können beispielsweise den Teil $('#myModal').on('show.bs.modal'...) haben, bevor Sie JQuery.js tatsächlich laden. In diesem Fall wird Ihr Aufruf ignoriert. Überprüfen Sie daher zunächst im HTML-Code (Seitenquelle anzeigen, ob Sie sicher sind), ob der Skriptlink zu JQuery über Ihrem modalen Aufruf onShow liegt. Andernfalls wird er ignoriert. Um Fehler zu beheben, setzen Sie eine Warnmeldung in die vorige. Wenn Sie den vorherigen und nicht den in der onShow-Funktion sehen, ist es offensichtlich, dass die Funktion nicht ausgeführt werden kann. Wenn die Rechtschreibung richtig ist, wird der Aufruf von JQuery.js wahrscheinlich nicht oder nach dem Teil onShow ausgeführt

1
Marius

In meinem Fall bestand das Problem darin, wie die Reisegröße kommentiert. Die Reihenfolge der Importe zwischen bootstrap.js und jquery. Weil ich die Vorlage Metronic verwende und vorher nicht prüfe

0

Im Folgenden sind die Details aufgeführt:

show.bs.modal funktioniert, während der Modelldialog geladen wird Post-Rendering

0
Anand

Stellen Sie sicher, dass Sie wirklich dasbootstrapjquery-Modal und kein anderes jquery-Modal verwenden.

Viel zu viel Zeit damit verschwendet ...

0
Didier Kernwein