Почему не срабатывает addEventListener при событии click?

Question

[Николай]

Добрый день.
После того, как я добавил загрузку данных с сервера c помощью XMLHttpRequest перестало работать событие click.

Пример элементов, на который вешаю событие.

<div>
   <a href="#" class="picture">
      <img class="picture__img" src="photos/3.jpg" width="120" height="120">
      <p class="picture__info">
        <span class="picture__comments">8</span>
        <span class="picture__likes">28</span>
      </p>
    </a>
   <a href="#" class="picture">
      <img class="picture__img" src="photos/4.jpg" width="120" height="120">
      <p class="picture__info">
        <span class="picture__comments">18</span>
        <span class="picture__likes">12</span>
      </p>
    </a>
</div>

Нахожу элемент "picture" с помощью querySelectorAll и на него вешаю событие click, чтобы открывалась эта картинка в большом размере (bigpicture).

for (var i=0; i<picture.length; i++) { 
       picture[i].addEventListener('click', function() {
	bigPicture.classList.remove('hidden');
});

Файл js с обработчиком события находится перед закрывающимся тэгом

Comments

[Алекс]

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

Могу посоветовать дебагером пробежаться

[Dies Irae]

Попробуйте

$(document).on('click', '.picture', function () {

}

[Николай]

Алекс, Проверил дебагером, и действительно, события создаются до добавления верстки. Вы не знаете, как это можно исправить?

Пробовал вот так запускать создание событий

window.addEventListener('DOMContentLoaded', function() {
    for (var i=0; i<picture.length; i++) { 
       picture[i].addEventListener('click', function() {
	bigPicture.classList.remove('hidden');
         });
     }
});

и так

window.addEventListener('load', function() {
    for (var i=0; i<picture.length; i++) { 
       picture[i].addEventListener('click', function() {
	bigPicture.classList.remove('hidden');
         });
     }
});

но ничего не получилось

[Сергей delphinpro]

Николай, вы лучше узнайте что такое делегирование событий, и вешайте одно событие на контейнер.

[Николай]

Сергей delphinpro, В моем случае делегирование не самый лучший вариант, так как я потом хочу вешать на каждый элемент обработчик, данные которого чуть-чуть отличаются, а для этого, как я понимаю, делегирование не подходит. Если это не так, то скажите это и я более подробно постараюсь изучить делегирование.
К тому же, хотелось бы и без делегирования уметь решать такие проблемы.

[Сергей delphinpro]

Николай, такие проблемы как раз делегированием и решаются =)

Вот разъяснение https://learn.javascript.ru/event-delegation
Вот применение https://learn.javascript.ru/event-delegation#prime... (попробуйте пример в действии)

[Николай]

Сергей delphinpro, Спасибо! Действительно, делегирование помогло решить эту проблему. Повесил событие на родителя элементов picture.

Answer 1

[DrLee]

Если Вы используете querySelector то замените на querySelectorAll('.pictures .picture'); чтобы получить массив всех элементов за тем навесьте обработчик через цикл.

Comments

[Николай]

Я как раз и использую querySelectorAll и с помощью цикла создаю обработчики. Извиняюсь, мой недочет в вопросе, уже исправил.

[DrLee]

А попробуйте все в window.onload = function() {
... тут код
}

записать, может просто еще эти элементы недоступны ?

[Николай]

window.onload к сожалению не помогло. Проблему решил, как подсказали в комментариях, с помощью делегирования, повесил обработчик на родителя элементов picture.

Answer 2

[Борис Черепанов]

Вам нужно вешать событие на элемент в котором лежат элементы которые пришли по AJAX или вешать на них событие уже после XMLHttpRequest. Возможно вы пытаетесь повесить событие на элементы, которых нет во время исполнения скрипта addEventListener('click'......