Как заставить работать ссылку в ссылке (MFP JQuery)?

Question

[thirteen_bit]

Здравствуйте! Есть условная структура:

<span class="some-title js-popup-open" href="#popup-1">
    Открыть Popup 1
    <span class="some-title js-popup-open" href="#popup-2">
       Открыть Popup 2
    </span>
</span>

<div id="popup-1"> class="mfp-hide">
   Первый попап!
</div>
<div id="popup-2"> class="mfp-hide">
   Второй попап!
</div>

И инициализация в JS:

$('body').magnificPopup({
    delegate: '.js-popup-open',
    type: 'inline'
});

При клике на дочерний элемент с href="#popup-2" вместо второго попапа открывается первый (как я понял, событие всплывает и из-за этого открывается не то, что нужно). Есть какая-нибудь возможность заставить это работать корректно?

Answer 1

[inkShio]

Зачем delegate ?

$('.js-popup-open').magnificPopup({
    type: 'inline'
});

у span не используется href, у магнифик есть такой атрибут data-mfp-src="#test-popup"

Comments

[thirteen_bit]

delegate нужен для создаваемых после загрузки страницы элементов (используется ajax). Насчет data-mfp-src спасибо, только проблему оно всё равно не решает)

[inkShio]

thirteen_bit,

document.addEventListener('DOMContentLoaded', function() {
	$(document).on('click', '.js-popup-open', function(event) {
		event.preventDefault();

		$(this).magnificPopup({
			type: 'inline'
		}).magnificPopup('open');
	});
});