Binden Sie eine Funktion an Twitter Bootstrap Modal Close

Ich verwende die Twitter Bootstrap-Bibliothek für ein neues Projekt und möchte, dass ein Teil der Seite die neuesten JSON-Daten beim modalen Schließen aktualisiert und abruft. Ich sehe das nirgendwo in der Dokumentation. Kann mich jemand darauf hinweisen oder eine Lösung vorschlagen?

Zwei Probleme bei der Verwendung der dokumentierten Methoden

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

Ich füge dem Modal bereits eine "hide" -Klasse hinzu, damit sie beim Laden der Seite nicht angezeigt wird, sodass sie zweimal geladen wird

Selbst wenn ich die Klasse hide entferne und die Element-ID auf setze display:noneund console.log("THE MODAL CLOSED");die obige Funktion hinzufüge , wenn ich auf Schließen drücke, passiert nichts.

Bootstrap 3 & 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

Siehe getbootstrap.com/2.3.2/javascript.html#modals → Ereignisse

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

In dieser JSFiddle finden Sie ein funktionierendes Beispiel:

https://jsfiddle.net/6n7bg2c9/

Siehe den Abschnitt Modale Ereignisse in den Dokumenten hier:

https://getbootstrap.com/docs/4.3/components/modal/#events

Beim Starten von Bootstrap 3 ( Bearbeiten: in Bootstrap 4 immer noch dasselbe ) gibt es zwei Instanzen, in denen Sie Ereignisse auslösen können:

1. Wenn das modale "Verstecken" -Ereignis beginnt

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. Wenn das modale "Verstecken" -Ereignis beendet ist

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Ref: http://getbootstrap.com/javascript/#js-events

Anstelle von "live" müssen Sie das Ereignis "on" verwenden, es jedoch dem Dokumentobjekt zuweisen:

Verwenden:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Bootstrap bietet Ereignisse, die Sie in Modal einbinden können.Wenn Sie beispielsweise ein Ereignis auslösen möchten,wenn das Modal nicht mehr für den Benutzer ausgeblendet ist, können Sie das Ereignis hidden.bs.modal wie folgt verwenden

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

Überprüfen Sie eine funktionierende Geige hier. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in der Dokumentation

Bootstrap 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs.modal : Dieses Ereignis wird sofort ausgelöst, wenn die Methode "hide instance" aufgerufen wurde.

hidden.bs.modal : Dieses Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist (wartet, bis die CSS-Übergänge abgeschlossen sind).

Ich würde es so machen:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

Der Rest wurde bereits von anderen geschrieben. Ich empfehle auch, die Dokumentation zu lesen: jquery - on Methode

Ich habe viele Antworten zu den Bootstrap-Ereignissen gesehen, z. B. hide.bs.modalwelche beim Schließen des Modals ausgelöst werden.

Bei diesen Ereignissen gibt es ein Problem: Popups im Modal (Popover, Tooltips usw.) lösen dieses Ereignis aus.

Es gibt eine andere Möglichkeit, das Ereignis zu erfassen, wenn ein Modal geschlossen wird.

$(document).on('hidden','#modal:not(.in)', function(){} );

Bootstrap verwendet die inKlasse, wenn das Modal geöffnet ist. Es ist sehr wichtig, das hiddenEreignis zu verwenden, da die Klasse inbeim hideAuslösen des Ereignisses noch definiert ist.

Diese Lösung funktioniert in IE8 nicht, da IE8 den Jquery- :not()Selektor nicht unterstützt .

Ich hatte die gleichen Probleme wie einige mit

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

Sie müssen dies unten auf der Seite platzieren. Wenn Sie es oben platzieren, wird das Ereignis nie ausgelöst.

Wenn Sie bei jedem Modalabschluss eine Funktion auslösen möchten, können Sie diese Methode verwenden:

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

Sie müssen also nicht jedes Mal modale IDs angeben.