Ошибка обратного вызова 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 -Подключение обратных вызовов. Так что я сделал, я следовал тому, что в документации, смотрите коды ниже:

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

Я попробовал этот код, но это не получает казнены, как я придаю это элемент, который генерируется динамически DOM, и когда всплывающее окно открывается и пользователь закрывает его, он перейдет к вышеуказанному коду. Я что-то упустил?

Answer 1

К сожалению Magnific Popup внутренне использует triggerHandler(), а не триггер() для реализации пользовательских событий, так что нет ни одного события для документа «слушать не» так что это может никогда не работать с текущими версиями

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