Почему не работает делегирование событий JS?

Question

[Im p3l]

Добрый вечер. Есть список, в который динамически добавляются новые элементы. Сделал пока тестово, чтоб при клике на элемент выводило в консоль лог data-id этого элемента. делегирование сделано на элементы списка, но почему то не работает.

Comments

[WapSter]

Жуть какая. jquery попахивает. А зачем в этом условии

if (e.target && e.target.classList.contains('todo-app_list-item'))

e.target?

[Im p3l]

WapSter, нашел тут https://davidwalsh.name/event-delegate.
Как лучше сделать, чтоб не пахло jquery?

[WapSter]

Lo Ran, это бессмысленная проверка, если не будет блока с классом todo-app_list-item, там будет null. Да и если не будет e.target то и не будет никакой речи о проверке на класс.

Как лучше сделать, чтоб не пахло jquery?

Не писать такую дичь

e.target.classList.contains('todo-app_list-item').getAttribute('data-id')

ты у true/false пытаешься найти атрибут.

Answer 1

[0xD34F]

Элемент списка не обязательно является целевым элементом. Он может целевой элемент содержать. Так что следует проверять, есть ли у целевого элемента соответствующий предок:

document.querySelector('.todo-app__list').addEventListener('click', e => {
  const li = e.target.closest('.todo-app__list-item');
  if (li) {
    console.log(li.dataset.id);
  }
});

Comments

[WapSter]

А точнее у него в коде label перекрывает li по этому условие не срабатывает.

[Im p3l]

WapSter, а как сделать, чтоб label не перекрывало, не меняя html структуру?

[WapSter]

Lo Ran, ну так вот же ответ елки палки, зачем ты с него решение снимаешь.

Answer 2

[vdem]

Может быть,
console.log(e.target.getAttribute('data-id'));
?

Comments

[Im p3l]

и выведет id тега ul у которого даже нет data-атрибутов

[vdem]

Lo Ran, Я заметил явную ошибку, из-за которой работать как ожидается код не будет ну никак вообще. А уж потом можно было бы глянуть, кто там target на самом деле.