Associa una funzione a Twitter Bootstrap Modal Close

Sto usando la libreria Twitter Bootstrap su un nuovo progetto e voglio che parte della pagina aggiorni e recuperi gli ultimi dati json alla chiusura modale. Non vedo questo da nessuna parte nella documentazione qualcuno può indicarmelo o suggerire una soluzione.

Due problemi con l'utilizzo dei metodi documentati

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

Allego una classe "nascondi" al modale già in modo che non venga visualizzato al caricamento della pagina in modo che venga caricato due volte

anche se rimuovo la classe hide e imposto l'id element su display:nonee aggiungo console.log("THE MODAL CLOSED");alla funzione sopra quando premo close non succede nulla.

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

Vedi getbootstrap.com/2.3.2/javascript.html#modals → Eventi

Bootstrap 4

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

Vedi questo JSFiddle per un esempio funzionante:

https://jsfiddle.net/6n7bg2c9/

Consulta la sezione Eventi modali dei documenti qui:

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

Avvio di Bootstrap 3 ( modifica: sempre lo stesso in Bootstrap 4 ) ci sono 2 istanze in cui è possibile avviare eventi, essendo:

1. Quando inizia l'evento "nascondi" modale

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

2. Al termine dell'evento modale "nascondi"

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

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

Invece di "live" devi usare l'evento "on", ma assegnalo all'oggetto documento:

Uso:

$(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 fornisce eventi che è possibile agganciare in modale , ad esempio se si desidera generare un evento quando il modale ha finito di essere nascosto all'utente, è possibile utilizzare un evento hidden.bs.modal come questo

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

Controlla un violino funzionante qui leggi di più sui metodi modali ed eventi qui nella Documentazione

Bootstrap 4:

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

hide.bs.modal : questo evento viene generato immediatamente quando è stato chiamato il metodo dell'istanza hide.

hidden.bs.modal : questo evento viene generato quando il modale ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).

Lo farei così:

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

Il resto è già stato scritto da altri. Consiglio anche di leggere la documentazione: metodo jquery - on

Ho visto molte risposte riguardo agli eventi bootstrap come quello hide.bs.modalche si innesca alla chiusura del modale.

C'è un problema con quegli eventi: qualsiasi popup nel modale (popovers, tooltip, ecc.) Attiverà quell'evento.

C'è un altro modo per catturare l'evento quando un modale si chiude.

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

Bootstrap utilizza la inclasse quando il modale è aperto. È molto importante utilizzare l' hiddenevento poiché la classe inè ancora definita quando hideviene attivato l'evento .

Questa soluzione non funzionerà in IE8 poiché IE8 non supporta il :not()selettore Jquery .

Avevo gli stessi problemi di alcuni con

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

Devi posizionarlo in fondo alla pagina, posizionandolo in alto non si accende mai l'evento.

se vuoi attivare una funzione ad ogni chiusura modale, puoi utilizzare questo metodo,

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

Quindi non è necessario specificare gli ID modali ogni volta.