Magnific-Popup關閉回調不執行

Question

對於具有mfp-ajax類的每個<a> ，將作為一個彈出框執行，並且此彈出框使用Magnific-Popup中的插件。

HTML：

<a href="/target" class="mfp-ajax multiselect-modal">View List</a>

Javascript：

magnificSetting: {
    type: 'ajax',
    mainClass: 'mfp-fade',
        ajax: {
            settings: {
                cache: false
        }
    }  
},
modals: function () {
    var self = this;

    $('a.mfp-ajax').each(function () {
        var $this = $(this);
        $this.magnificPopup(self.settings.magnificSetting);
    });
}

這些代碼工作正常，但是<a>有時是在DOM中動態生成的，我必須為Magnific-Popup回調創建一個單獨的腳本。 所以我要做的是遵循文檔中的內容，請參見下面的代碼：

$(document).on('mfpClose', '.multiselect-modal', function () {
    console.log('test');
});

我嘗試了此代碼，但未執行，如何將其附加到DOM中動態生成的元素中，當彈出窗口打開並用戶關閉它時，它將轉到上面的代碼。 我在這里想念什么嗎？

Answer 1

不幸的是，Magnific Popup在內部使用triggerHandler（）而不是trigger（）來實現自定義事件，因此該文檔沒有事件可以“監聽”，因此這可能不適用於當前版本

$(document).on('mfpClose', '.multiselect-modal', function () {
console.log('test');
});

有一個解決方法，但是需要您創建全局事件，這是一種不好的做法，因此我建議您使用回調，這種情況下您應該關閉

$.magnificPopup.instance.close = function() {

//do your stuff here

//this calls the original close to close popup
//you may well comment it out which would totally disable the close button or execute conditional in if else 
$.magnificPopup.proto.close.call();
};

these are some properties 

//property 

magnificPopup.currItem // current item
magnificPopup.index // current item index 

// Navigation
magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to slide #4