javascript - Magnific-Popup 关闭回调不执行

Question

对于每个 <a>有 mfp-ajax类会作为弹出框执行，这个弹出框使用了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