Arttur
@Arttur
Приложения на JavaScript

События для динамически добавленных элементов, какой запрос сделать к DOM?

Здравствуйте. Вставляю новые элементы при клике на кнопку. Как при добавлении новых элементов сделать проверку у каких элементов есть событие, а у каких нет и навесить если нет.

let row = document.querySelector(".row");
		let btn = document.querySelector(".btn");
		let photoGirls = [].slice.call(document.querySelectorAll(".row .img"));

		class hoverImage {
			static mouseover () {
				this.classList.add("img--active")
			}
			static mouseout () {
				this.classList.remove("img--active")
			}
		}

		function jsonGirls() {
			let promise = new Promise(function(resolve, reject) {
				let requestGirls = new XMLHttpRequest();
				requestGirls.open("get", "girls.json", true);
				requestGirls.send();
				requestGirls.onreadystatechange = function () {
					if (requestGirls.readyState === 4) {
						if (requestGirls.status === 200) {
							let jsonGirl = JSON.parse(requestGirls.responseText);
							let loaded = +row.getAttribute("data-loaded-count");
							let nextLoaded = loaded + 5;
							if (nextLoaded >= jsonGirl.length) {
								btn.style.display = "none";
							}
							let jsonGirlCopy = jsonGirl.slice().splice(loaded, 5);
							
							row.setAttribute("data-loaded-count", nextLoaded);
							
							jsonGirlCopy.forEach(function (element) {
								let newPhotoGirls = `<div class="img" style="background-image:${element.img}"><div class="img-hover"><div class="img__title">${element.text}</div></div></div>`;
								row.insertAdjacentHTML("beforeend", newPhotoGirls);
							});
							resolve(requestGirls)
						} else {
							reject(requestGirls)
						}
					}
				}
			})
			return promise;
		}
		
		btn.onclick = function () {
			jsonGirls()
				.then(
					function(onFulfilled) {
						
						
					},
					function(onRejected) {
						alert("Загрузите ещё раз");
					}
				)
		};

		photoGirls.forEach(function (element) {
			element.addEventListener("mouseover", hoverImage.mouseover);
			element.addEventListener("mouseout", hoverImage.mouseout);
		});
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
Arttur
@Arttur Автор вопроса
Приложения на JavaScript
Хоуми, если кому надо без делегирования Решение
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
Как при добавлении новых элементов сделать проверку у каких элементов есть событие, а у каких нет и навесить если нет.

Вам это не нужно. Гуглите "делегирование javascript".
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы