Bir işlevi Twitter Bootstrap Modal'a bağlama

Twitter Bootstrap lib'i yeni bir projede kullanıyorum ve sayfanın bir kısmının modal kapanıştaki en son json verilerini yenilemesini ve almasını istiyorum. Belgenin herhangi bir yerinde bunu görmüyorum, birisi bana işaret edebilir veya bir çözüm önerebilir.

Belgelendirilmiş yöntemlerin kullanımıyla ilgili iki sorun

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

Ben zaten bir "gizle" sınıf zaten iki yük yüklemek, böylece sayfa yükü görüntülenmez bu yüzden modal eklemek

hide sınıfını kaldırsam ve öğe kimliğini ayarlayıp yakın fonksiyona display:noneeklediğimde console.log("THE MODAL CLOSED");yukarıdaki işleve eklesem bile hiçbir şey olmaz.

Önyükleme 3 ve 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…
});

Getbootstrap.com/2.3.2/javascript.html#modals → Etkinliklere bakın

Bootstrap 4

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

Çalışan bir örnek için bu JSFiddle'a bakın:

https://jsfiddle.net/6n7bg2c9/

Dokümanların Kalıcı Etkinlikler bölümüne bakın:

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

Bootstrap 3'ü başlatma ( düzenleme: Bootstrap 4'te hala aynı ), olayları tetikleyebileceğiniz 2 örnek vardır:

1. Kalıcı "gizle" etkinliği başladığında

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

2. Kalıcı "gizle" etkinliği tamamlandığında

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

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

"Canlı" yerine "on" etkinliğini kullanmanız, ancak bunu belge nesnesine atamanız gerekir:

kullanın:

$(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 içine kanca olabilir olayları sağlayan modal bir yangın istiyorsanız gibi, olayı kullanabileceğiniz kullanıcıdan kalıcı gizlenmiş olarak tamamladı hidden.bs.modal böyle olayı

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

Çalışan bir kontrol keman burada burada kalıcı yöntemler ve olaylar hakkında daha fazla bilgi Belgeler

Bootstrap 4:

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

hide.bs.modal : Bu olay, hide örneği yöntemi çağrıldığında hemen tetiklenir.

hidden.bs.modal : Modun kullanıcıdan gizlenmesi bittiğinde bu olay tetiklenir (CSS geçişlerinin tamamlanmasını bekler).

Bunu şöyle yaparım:

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

Gerisi zaten başkaları tarafından yazılmıştır. Ayrıca belgelerin okunmasını da tavsiye ederim: jquery - on yöntemi

hide.bs.modalModal kapandığında hangi tetikleyici olayları gibi bootstrap olaylarıyla ilgili birçok cevap gördüm .

Bu olaylarla ilgili bir sorun var: moddaki tüm pop-up'lar (popoverler, araç ipuçları vb.) Bu etkinliği tetikleyecek.

Bir modal kapandığında olayı yakalamanın başka bir yolu daha vardır.

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

inModsal açıkken Bootstrap sınıfı kullanır . Olay tetiklendiğinde hiddensınıf inhala tanımlandığından olayı kullanmak çok önemlidir hide.

IE8 Jquery :not()seçiciyi desteklemediğinden bu çözüm IE8'de çalışmaz .

Bazılarıyla aynı sorunları yaşıyordum

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

Bunu sayfanın altına yerleştirmelisiniz, en üste yerleştirmek asla etkinliği tetiklemez.

her modal kapanışta bir işlev başlatmak istiyorsanız, bu yöntemi kullanabilirsiniz,

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

Bu yüzden her seferinde kalıcı kimlikler belirtmeniz gerekmez.