Прив’яжіть функцію до Twitter Bootstrap Modal Close

Я використовую вкладку Twitter Bootstrap для нового проекту, і я хочу, щоб частина сторінки оновила та отримала останні дані json на модальному закритті. Я не бачу цього ніде в документації, хтось може мені це вказати чи запропонувати рішення.

Дві проблеми з використанням документованих методів

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

Я додаю клас "приховати" до модального, щоб він не відображався при завантаженні сторінки, щоб завантажуватись двічі

навіть якщо я видаляю клас приховування і встановлюю ідентифікатор елемента display:noneі додаю console.log("THE MODAL CLOSED");до функції вище, коли я натискаю, закриття нічого не відбувається.

Запуск 3 і 4

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

Запуск 3: getbootstrap.com/javascript/#modals-events

Запуск 4: getbootstrap.com/docs/4.1/components/modal/#events

Запуск 2.3.2

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

Дивіться сторінку getbootstrap.com/2.3.2/javascript.html#modals → Події

Завантаження 4

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

Дивіться цей JSFiddle на робочому прикладі:

https://jsfiddle.net/6n7bg2c9/

Дивіться розділ Модальні події в документах тут:

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

Запускаючи Bootstrap 3 ( редагуйте: все ще те саме в Bootstrap 4 ), є два випадки, коли ви можете запускати події, будучи:

1. Коли починається модальна подія "приховати"

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

2. Коли модальний захід «приховати» закінчено

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

Посилання: http://getbootstrap.com/javascript/#js-events

Замість "живого" вам потрібно використовувати подію "on", але призначити її об'єкту документа:

Використання:

$(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 передбачено події, які можна підключити до модальних , наприклад, якщо ви хочете запустити подію, коли модал закінчено приховати від користувача, ви можете використовуватиподії hidden.bs.modal, як це

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

Ознайомтеся з робочою загадкою, читайте більше про модальні методи та події тут, у Документації

Запуск 4:

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

hid.bs.modal : Ця подія запускається негайно, коли викликається метод примірника приховати.

hidden.bs.modal : Ця подія запускається, коли модаль закінчено приховати від користувача (буде чекати завершення переходів CSS).

Я б це зробив так:

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

Решту вже написали інші. Я також рекомендую прочитати документацію: jquery - про метод

Я бачив багато відповідей щодо подій завантаження, наприклад, hide.bs.modalякі спрацьовують, коли модальний режим закривається.

Існує проблема з тими подіями: будь-які спливаючі вікна в модальному режимі (popovers, підказки тощо) спричинить цю подію.

Є ще один спосіб зловити подію, коли модаль закривається.

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

Bootstrap використовує inклас, коли модал відкритий. Дуже важливо використовувати hiddenподію, оскільки клас inвсе ще визначається при hideзапуску події .

Це рішення не працюватиме в IE8, оскільки IE8 не підтримує :not()селектор Jquery .

У мене були ті ж проблеми, що і з деякими

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

Потрібно розмістити це внизу сторінки, розміщення його вгорі ніколи не викликає події.

якщо ви хочете запустити функцію на кожному модальному закритті, ви можете використовувати цей метод,

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

Тому вам не потрібно кожного разу вказувати модальні ідентифікатори.