ผูกฟังก์ชั่นกับ Twitter Bootstrap Modal Close

ฉันใช้ Twitter Bootstrap lib ในโครงการใหม่และฉันต้องการให้บางส่วนของหน้าเว็บทำการรีเฟรชและดึงข้อมูล json ล่าสุดเมื่อปิดการใช้งาน ฉันไม่เห็นสิ่งนี้ในเอกสารใด ๆ ใครสามารถชี้ให้ฉันหรือแนะนำวิธีแก้ปัญหา

ปัญหาสองประการเกี่ยวกับการใช้วิธีการที่ทำเป็นเอกสาร

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

ฉันแนบคลาส "ซ่อน" กับโมดัลแล้วดังนั้นจึงไม่ปรากฏในการโหลดหน้าเพื่อที่จะโหลดสองครั้ง

แม้ว่าฉันจะลบคลาส hide และตั้งค่าองค์ประกอบ id display:noneและเพิ่มconsole.log("THE MODAL CLOSED");ไปยังฟังก์ชั่นด้านบนเมื่อฉันกดปิดไม่มีอะไรเกิดขึ้น

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

ดูที่getbootstrap.com/2.3.2/javascript.html#modals →กิจกรรม

Bootstrap 4

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

ดู JSFiddle นี้สำหรับตัวอย่างการทำงาน:

https://jsfiddle.net/6n7bg2c9/

ดูหัวข้อกิจกรรม Modal ของเอกสารที่นี่:

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

การเริ่มBootstrap 3 ( แก้ไข:ยังคงเหมือนเดิมในBootstrap 4 ) มี 2 อินสแตนซ์ที่คุณสามารถเริ่มเหตุการณ์ได้โดย:

1. เมื่อเหตุการณ์ "mod" เริ่มขึ้น

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

2. เมื่อ modal "hide" เหตุการณ์เสร็จสิ้น

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

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

แทน "สด" คุณต้องใช้เหตุการณ์ "เปิด" แต่กำหนดให้กับวัตถุเอกสาร:

ใช้:

$(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 นำเสนอกิจกรรมที่คุณสามารถเชื่อมต่อกับ modalได้เช่นถ้าคุณต้องการเริ่มต้นเหตุการณ์เมื่อ modal เสร็จสิ้นการถูกซ่อนจากผู้ใช้คุณสามารถใช้ hidden.bs.modal eventsเช่นนี้

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

ตรวจสอบซอทำงานได้ที่นี่อ่านเพิ่มเติมเกี่ยวกับวิธีการโมดัลและกิจกรรมที่นี่ในเอกสาร

Bootstrap 4:

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

hide.bs.modal : เหตุการณ์นี้เกิดขึ้นทันทีเมื่อมีการเรียกวิธีการซ่อนอินสแตนซ์

hidden.bs.modal : เหตุการณ์นี้เกิดขึ้นเมื่อ modal เสร็จสิ้นการซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์)

ฉันจะทำเช่นนี้:

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

ส่วนที่เหลือเขียนโดยคนอื่นแล้ว ฉันยังแนะนำให้อ่านเอกสาร: วิธีการ jquery - on

ฉันเห็นคำตอบมากมายเกี่ยวกับกิจกรรมบู๊ตสแตรปเช่น hide.bs.modalที่ทำให้เกิดเมื่อ modal ปิด

มีปัญหากับกิจกรรมเหล่านั้น: ป๊อปอัปใด ๆ ในโมดอล (ป๊อปอัป, เคล็ดลับเครื่องมือ ฯลฯ ) จะทริกเกอร์เหตุการณ์นั้น

มีวิธีอื่นในการติดตามเหตุการณ์เมื่อมีการปิดคำกริยา

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

Bootstrap ใช้inคลาสเมื่อ modal เปิดอยู่ มันสำคัญมากที่จะใช้งานอีhiddenเวนต์เนื่องจากคลาสinยังคงถูกกำหนดไว้เมื่อมีการจัดอีเวนต์hideมีการทริกเกอร์

วิธีนี้จะไม่ทำงานใน IE8 เนื่องจาก IE8 ไม่รองรับ:not()ตัวเลือกJquery

ฉันมีปัญหาเดียวกันกับบางอย่าง

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

คุณต้องวางสิ่งนี้ไว้ที่ด้านล่างของหน้าโดยวางไว้ที่ด้านบนสุดเพื่อไม่ให้เกิดเหตุการณ์

ถ้าคุณต้องการที่จะยิงฟังก์ชั่นในทุกปิด modal คุณสามารถใช้วิธีนี้

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

ดังนั้นคุณไม่จำเป็นต้องระบุรหัส modal ทุกครั้ง