Bind fungsi ke Twitter Bootstrap Modal Tutup

Saya menggunakan lib Bootstrap Twitter pada proyek baru dan saya ingin sebagian halaman menyegarkan dan mengambil data json terbaru tentang modal tutup. Saya tidak melihat ini di mana saja dalam dokumentasi yang dapat seseorang tunjukkan kepada saya atau menyarankan solusi.

Dua masalah dengan menggunakan metode yang didokumentasikan

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

Saya melampirkan kelas "sembunyikan" ke modal sehingga tidak ditampilkan pada halaman memuat sehingga akan memuat dua kali

bahkan jika saya menghapus kelas sembunyikan dan mengatur id elemen display:nonedan menambahkan console.log("THE MODAL CLOSED");ke fungsi di atas ketika saya menekan tutup tidak ada yang terjadi.

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

Lihat getbootstrap.com/2.3.2/javascript.html#modals → Acara

Bootstrap 4

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

Lihat JSFiddle ini untuk contoh kerja:

https://jsfiddle.net/6n7bg2c9/

Lihat bagian Acara Modal dokumen di sini:

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

Mulai Bootstrap 3 ( edit: masih sama di Bootstrap 4 ) ada 2 contoh di mana Anda dapat menjalankan peristiwa, yaitu:

1. Ketika modal "sembunyikan" acara dimulai

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

2. Ketika modal "sembunyikan" acara selesai

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

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

Sebagai ganti "live" Anda harus menggunakan "on" event, tetapi tetapkan ke objek dokumen:

Menggunakan:

$(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 menyediakan acara yang dapat Anda kaitkan ke modal , seperti jika Anda ingin memecat suatu peristiwa ketika modal telah selesai disembunyikan dari pengguna Anda dapat menggunakanacara hidden.bs.modal seperti ini

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

Lihat biola yang berfungsi di sini, baca lebih lanjut tentang metode modal dan acara di Dokumentasi

Bootstrap 4:

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

hide.bs.modal : Peristiwa ini dipecat segera ketika metode contoh sembunyikan telah dipanggil.

hidden.bs.modal : Acara ini dipecat ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).

Saya akan melakukannya seperti ini:

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

Selebihnya sudah ditulis oleh orang lain. Saya juga merekomendasikan membaca dokumentasi: metode jquery - on

Saya telah melihat banyak jawaban mengenai peristiwa bootstrap seperti hide.bs.modalyang dipicu ketika modal ditutup.

Ada masalah dengan peristiwa itu: sembulan di modal (popover, tooltips, dll) akan memicu peristiwa itu.

Ada cara lain untuk menangkap acara ketika modal ditutup.

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

Bootstrap menggunakan inkelas saat modal terbuka. Sangat penting untuk menggunakan hiddenevent karena kelas inmasih didefinisikan ketika event hidedipicu.

Solusi ini tidak akan berfungsi di IE8 karena IE8 tidak mendukung :not()pemilih Jquery .

Saya mengalami masalah yang sama dengan beberapa orang

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

Anda harus menempatkan ini di bagian bawah halaman, menempatkannya di bagian atas tidak pernah menyalakan acara.

jika Anda ingin memecat suatu fungsi pada setiap penutupan modal, Anda dapat menggunakan metode ini,

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

Jadi, Anda tidak perlu menentukan id modal setiap waktu.