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

代码工作正常，但有时在DOM中动态生成<a>，我必须为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

Magnific-Popup关闭回调无法执行

1 个答案: