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