Magnific-Popup 关闭回调不执行

Question

对于每个<a>有mfp-ajax的class都会作为弹框执行，这个弹框使用了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() 来实现自定义事件，因此文档没有事件 "listen to" 因此这可能永远无法与当前版本一起使用

$(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

Magnific-Popup 关闭回调不执行

Magnific-Popup close callback does not execute

javascript

ajax

jquery

magnific-popup