Не работает Popup после AJAX?

Question

[Александр]

Есть кнопка вида < a class="schedule_popup_fos smt-popup-link" href="#smt-popup-order">Записаться a >
AJAX подгружает такие же кнопки, по нажатию на которые должна отработать библиотечка Magnific Popup (dimsemenov.com/plugins/magnific-popup) и открыть соответствующие окно.

После AJAX клик отслеживаю таким скриптом
$(document).ready(function(){
$('body').on('click', '.schedule_popup_fos', function(e) {
e.preventDefault();
$('.smt-popup-link').magnificPopup({
type: 'inline',
autoFocusLast: false
});
});
});

Окно появляется только после 2-го клика на кнопку.

Answer 1

[jekanok]

у меня тоже была такая проблема, и я ее исправил, просто заново подключил библиотеку jquery

Answer 2

[tommy_13]

> Окно появляется только после 2-го клика на кнопку.

потому что ты его инициализируешь при первом клике, а нужно в коллбеке аякса

$('body').on('click', '.schedule_popup_fos', function(e) {
e.preventDefault();
$('.smt-popup-link').magnificPopup({
type: 'inline',
autoFocusLast: false
});
});

Comments

[decepticon717]

Здравствуй, я вообще не шарю, как нужно инициализировать правильно, что бы открывался при первом щелчке?

Мой код:

$('body').on('click', '.ajax-item', function(e) {
		e.preventDefault();
		$('.room-popup').magnificPopup({
			mainClass: 'mfp-fade',
			removalDelay: 300,
			type: 'inline',
		});
	});

Answer 3

[Oleg]

Не совсем по теме, но если кто столкнется с такой-же проблемой в Битриксе, то там это лечится так:

// инициализируем свою функцию, где инициализируем Magnific popup в нужном нам месте
// (код инициализации Magnific popup оставил свой, лень, у вас он может отличаться)
function popap() {
		$('.popup-gallery').magnificPopup({
			delegate: 'a',
			type: 'image',
			tLoading: 'Loading image #%curr%...',
			mainClass: 'mfp-img-mobile',
			gallery: {
				enabled: true,
				navigateByImgClick: true,
				preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
			},
			image: {
				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
				titleSrc: function (item) {
					return item.el.attr('title');
				}
			}
		});
	}
//применяем Magnific popup там где нет ajax
	popap();
//самое интересное тут!
//применяем Magnific popup там где есть ajax
//данная функция вызовет popap() при включенном аяксе
	BX.addCustomEvent('onAjaxSuccess', function() {
		popap();
	});