Почему некорректно работают события в слайдере swiper?

Question

[Danya Wyse]

https://iwyse.github.io/Zainoo/
Если загрузить страницу впервые и начать смотреть с 3 слайдера ( то есть листнуть влево чтобы было 3\3) то не работает кнопка watch video. На ней не висит обработчик событий. Почему так ? И как сделать так чтобы EVENT весел на всех слайдерах ВСЕГДА ?
Если листать и нажимать слайдеры по порядку 1 потом 2 потом 3 то все корректно, но на 4 event опять пропадает.

Comments

[Stanislav]

Набор селекторов по порядку
gallery__slide swiper-slide swiper-slide-active
gallery__slide swiper-slide swiper-slide-prev
gallery__slide swiper-slide swiper-slide-duplicate-next

Селектор который ломает твою кнопку
gallery__slide swiper-slide swiper-slide-next swiper-slide-duplicate-prev

Дальше сам ибо кода null

[Danya Wyse]

nedosekinstanislav,
Буду очень благодарен если поможешь
Вот скрипт на открытие попапов
Свайпер сам не вижу смысла кидать, там все стандартно

const buttonsModal = document.querySelectorAll('.open-modal');

const modalArr = [
	{
		"src": "https://www.youtube.com/embed/aqgyhk2TGfs?autoplay=1",
	},
	{
		"src": "https://www.youtube.com/embed/X091vYnLRhE?autoplay=1",
	},
	{
		"src": "https://www.youtube.com/embed/UFFgfE72tZQ?autoplay=1",
	}
];

const element = document.createElement('section');
class PopupFrame {
	constructor(src, parentSelector) {
		this.src = src;
		this.parent = document.querySelector(parentSelector);
	}
	render() {
		element.classList.add('frame');
		element.classList.add('frame-active');
		element.innerHTML = `

		 <div class="modal"  data-animation="slideInOutLeft">
			  <div class="modal-dialog">
					<button class="close-modal _icon-close" ></button>
					<section class="modal-container">
						 <div class="video">
						 <iframe src="${this.src}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						 </div>
					</section>
			  </div>
		 </div>

		 `
		this.parent.append(element);
		const buttonClose = document.querySelector(".close-modal");
		buttonClose.addEventListener("click", () => {
			stopPopup();
		})

	}
}


buttonsModal.forEach(btn => {
	btn.addEventListener('click', (e) => {
		e.preventDefault();
		const idPopup = e.target.getAttribute('data-id');
		new PopupFrame(modalArr[idPopup].src, 'body').render();
		document.querySelector('.modal').classList.add("is-visible");
		document.documentElement.classList.add("lock");
		document.querySelector('.video').classList.add('active');

	})
})

function stopPopup() {
	element.remove();
}

document.addEventListener("click", e => {
	if (e.target === document.querySelector(".modal.is-visible")) {
		stopPopup();
	}
});

document.addEventListener("keyup", e => {
	if (e.key === "Escape" && document.querySelector(".modal.is-visible")) {
		stopPopup();
	}
});

Answer 1

[Юрий]

С включенным loop ваш свайпер создаёт дубликаты слайдов, чтобы прокрутка была бесконечной. Судя по всему, это происходит после того, как отрабатывает ваш скрипт, открывающий видео, из коммента выше. При создании дубликата из оригинала копируется только разметка, но не обработчики событий.

Первый вариант решения - выполнять ваш скрипт после того, как слайдер смонтируется, в swiper.js есть соответствующий эвент, читайте доки.

Второй вариант - вешать обработчик не на кнопки по отдельности, а на весь слайдер, и проверять в обработчике, что именно нажато. Если нужная кнопка - брать из неё id видео, открывать модал и так далее.

Comments

[Danya Wyse]

Много ивентов перепробовал, не помогает

[Danya Wyse]

Пока добился той логики что хотел, слайды стали открываться. Но ивент читает клик по всей области. Пока думаю как привязать его только к кнопке. event в event не работает.

swiperWrap.addEventListener("click", (e) => {
	buttonsModal.forEach(btn => {
		e.preventDefault();
		const idPopup = e.target.getAttribute('data-id');
		new PopupFrame(modalArr[idPopup].src, 'body').render();
		document.querySelector('.modal').classList.add("is-visible");
		document.documentElement.classList.add("lock");
		document.querySelector('.video').classList.add('active');
	})
});

[Danya Wyse]

Добил https://iwyse.github.io/Zainoo/

Answer 2

[Никита Кит]

Для этого нужно делегировать обработку события не самим слайдам, а врапперу. В начале обработчика убедиться что в e.path есть слайд и он родитель target ноды или сама target нода
Дублирование дерева в списке слайдов не инициирует новые ивенты на новых слайдах. В этом суть проблемы

Comments

[Danya Wyse]

Что такое target нода ?
Я пробую вешать всякие ивенты на swiper, но ничего не меняется

[Никита Кит]

Danya Wyse, это самая глубокая нода, на которую приходится событие. Учи матчасть