Liên kết một chức năng với Twitter Bootstrap Modal Đóng

Tôi đang sử dụng lib Bootstrap của Twitter trong một dự án mới và tôi muốn một phần của trang để làm mới và truy xuất dữ liệu json mới nhất về chế độ đóng. Tôi không thấy điều này ở bất cứ đâu trong tài liệu có thể ai đó chỉ ra cho tôi hoặc đề xuất một giải pháp.

Hai vấn đề với việc sử dụng các phương pháp tài liệu

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

Tôi đã đính kèm một lớp "ẩn" với phương thức đã có để nó không hiển thị khi tải trang để có thể tải hai lần

ngay cả khi tôi loại bỏ lớp ẩn và đặt id phần tử thành display:nonevà thêm console.log("THE MODAL CLOSED");vào hàm ở trên khi tôi nhấn gần thì không có gì xảy ra.

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

Xem getbootstrap.com/2.3.2/javascript.html#modals → Sự kiện

Bootstrap 4

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

Xem JSFiddle này để biết ví dụ hoạt động:

https://jsfiddle.net/6n7bg2c9/

Xem phần Sự kiện Modal của các tài liệu ở đây:

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

Bắt đầu Bootstrap 3 ( chỉnh sửa: vẫn giống trong Bootstrap 4 ), có 2 trường hợp bạn có thể khởi động các sự kiện, đó là:

1. Khi sự kiện "ẩn" phương thức bắt đầu

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

2. Khi sự kiện "ẩn" kết thúc

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

Tham chiếu: http://getbootstrap.com/javascript/#js-events

Thay vì "trực tiếp", bạn cần sử dụng sự kiện "bật", nhưng gán nó cho đối tượng tài liệu:

Sử dụng:

$(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 cung cấp các sự kiện mà bạn có thể kết nối thành phương thức , như nếu bạn muốn kích hoạt một sự kiện khi phương thức kết thúc bị ẩn khỏi người dùng, bạn có thể sử dụngsự kiện hidden.bs.modal như thế này

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

Kiểm tra một câu đố làm việc ở đây đọc thêm về các phương thức và sự kiện phương thức ở đây trong Tài liệu

Bootstrap 4:

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

hide.bs.modal : Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn đã được gọi.

hidden.bs.modal : Sự kiện này được kích hoạt khi phương thức kết thúc bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).

Tôi sẽ làm như thế này:

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

Phần còn lại đã được viết bởi những người khác. Tôi cũng khuyên bạn nên đọc tài liệu: jquery - về phương pháp

Tôi đã thấy nhiều câu trả lời liên quan đến các sự kiện bootstrap như hide.bs.modalkích hoạt khi chế độ đóng.

Có một vấn đề với những sự kiện đó: bất kỳ cửa sổ bật lên nào trong phương thức (cửa sổ bật lên, chú giải công cụ, v.v.) sẽ kích hoạt sự kiện đó.

Có một cách khác để bắt sự kiện khi một phương thức đóng cửa.

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

Bootstrap sử dụng inlớp khi phương thức được mở. Điều rất quan trọng là sử dụng hiddensự kiện vì lớp invẫn được xác định khi sự kiện hideđược kích hoạt.

Giải pháp này sẽ không hoạt động trong IE8 vì IE8 không hỗ trợ :not()bộ chọn Jquery .

Tôi đã có những vấn đề tương tự như một số với

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

Bạn cần đặt nó ở dưới cùng của trang, đặt nó ở đầu trang không bao giờ kích hoạt sự kiện.

Nếu bạn muốn kích hoạt một chức năng trên mỗi chế độ đóng, bạn có thể sử dụng phương thức này,

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

Vì vậy, bạn không cần chỉ định id phương thức mỗi lần.