Magnific-Popup close callback does not execute

Question

For each <a> that has mfp-ajax class will be executed as a pop-up box, and this pop-up box use the plugin in 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);
    });
}

The codes works fine, however <a> is sometimes dynamically generated in the DOM and I have to create a separate script for Magnific-Popup callbacks. So what I did is I followed what is in the documentation, see the codes below:

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

I tried this code but this does not get executed, how do I attach this in an element that is being generated dynamically in the DOM and when the pop-up opens and the user close it, it will go to the above code. Am I missing something here?

score 1 · Accepted Answer · answered Jul 19 '16 at 14:20

Unfortunately Magnific Popup internally uses triggerHandler() rather than trigger() to implement custom events ,so there is no event for the document to "listen to" so this may never work with current versions

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

There is one fix but that requires you to create global events which is a bad practise so i advice you to make use of callbacks which is close in your case goes like this

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

how about for each instance `close` there is a specific codes this might depend what the modal use for? For instance, first modal close functions finds some elements in the DOM then initialize it; second modal close functions finds some elements in the DOM ang get their values. — rpmansion, Jul 19 '16 at 20:14
You can assign some unique data attributes to your popups and depending on that conditional run code .See [this](http://stackoverflow.com/questions/16885863/magnific-popup-get-current-element-in-callback) how to get the original DOM object so you can run almost all jquery/dom method on it — Vinay, Jul 20 '16 at 06:58

Magnific-Popup close callback does not execute

1 Answers1