Powiąż funkcję z modułem Twitter Bootstrap Modal Close

Korzystam z biblioteki Twitter Bootstrap w nowym projekcie i chcę, aby część strony odświeżyła i pobrała najnowsze dane Json po zamknięciu modalnym. Nie widzę tego nigdzie w dokumentacji, ktoś mógłby mi to wskazać lub zaproponować rozwiązanie.

Dwa problemy z użyciem udokumentowanych metod

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

Do klasy modalnej dołączam już klasę „ukryj”, aby nie wyświetlała się przy ładowaniu strony, więc ładowałaby się dwukrotnie

nawet jeśli usunę klasę ukrywania i ustawię identyfikator elementu na display:nonei dodam console.log("THE MODAL CLOSED");do powyższej funkcji, gdy uderzę blisko, nic się nie dzieje.

Bootstrap 3 i 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…
});

Zobacz getbootstrap.com/2.3.2/javascript.html#modals → Wydarzenia

Bootstrap 4

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

Zobacz ten JSFiddle dla działającego przykładu:

https://jsfiddle.net/6n7bg2c9/

Zobacz sekcję wydarzeń modalnych w dokumentach tutaj:

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

Uruchamianie Bootstrap 3 ( edycja: wciąż to samo w Bootstrap 4 ) istnieją 2 instancje, w których można uruchamiać zdarzenia, a mianowicie:

1. Po uruchomieniu modalnego zdarzenia „ukryj”

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

2. Po zakończeniu modalnego zdarzenia „ukryj”

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

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

Zamiast zdarzenia „na żywo” musisz użyć zdarzenia „on”, ale przypisz je do obiektu dokumentu:

Posługiwać się:

$(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 zapewnia zdarzenia, które można podłączyć do modalu , np. Jeśli chcesz uruchomić zdarzenie, gdy modal skończy się ukryty przed użytkownikiem, możesz użyćzdarzenia hidden.bs.modal , takiego jak to

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

Sprawdź działające skrzypce tutaj czytaj więcej o metodach modalnych i zdarzeniach tutaj w Dokumentacji

Bootstrap 4:

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

hide.bs.modal : To zdarzenie jest uruchamiane natychmiast po wywołaniu metody instancji hide.

hidden.bs.modal : To zdarzenie jest uruchamiane, gdy modal skończy się ukryty przed użytkownikiem (poczeka na zakończenie przejścia CSS).

Zrobiłbym to w ten sposób:

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

Reszta została już napisana przez innych. Polecam również przeczytanie dokumentacji: metoda jquery - on

Widziałem wiele odpowiedzi dotyczących zdarzeń ładowania początkowego, takich jak hide.bs.modalwyzwalanie po zamknięciu modalu.

Wystąpił problem z tymi zdarzeniami: wszelkie wyskakujące okienka w module (popovers, podpowiedzi itp.) Spowodują to zdarzenie.

Istnieje inny sposób na złapanie zdarzenia po zamknięciu modalu.

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

Bootstrap używa inklasy, gdy modal jest otwarty. Bardzo ważne jest użycie hiddenzdarzenia, ponieważ klasa injest nadal definiowana podczas zdarzeniahide zostanie wyzwolone.

To rozwiązanie nie będzie działać w IE8, ponieważ IE8 nie obsługuje :not()selektora Jquery .

Miałem te same problemy, co niektóre

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

Musisz umieścić to na dole strony, umieszczenie go na górze nigdy nie uruchamia wydarzenia.

jeśli chcesz uruchomić funkcję przy każdym zamknięciu modalnym, możesz użyć tej metody,

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

Nie musisz więc za każdym razem określać modalnych identyfikatorów.