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

Question

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

document.querySelector('.todo-app__list').addEventListener('click', function(e) {
  if (e.target && e.target.classList.contains('todo-app_list-item')) {
    console.log(e.target.classList.contains('todo-app_list-item').getAttribute('data-id'));
  }
});

.todo-app__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.todo-app__list-item {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed
}

.todo-app__list-item:last-child {
  border-bottom: none;
}

.todo-app__list-checkbox {
  margin: auto 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  appearance: none;
  outline: none;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-app__list-checkbox:checked {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}

.todo-app__list-checkbox-label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

<ul class="todo-app__list">
  <li data-id="1595258829696" class="todo-app__list-item">
    <input type="checkbox" class="todo-app__list-checkbox">
    <label class="todo-app__list-checkbox-label">
      123
    </label>
  </li>
  <li data-id="1595258830633" class="todo-app__list-item">
    <input type="checkbox" class="todo-app__list-checkbox">
    <label class="todo-app__list-checkbox-label">
      345
    </label>
  </li>
  <li data-id="1595258831456" class="todo-app__list-item">
    <input type="checkbox" class="todo-app__list-checkbox">
    <label class="todo-app__list-checkbox-label">
      567
    </label>
  </li>
</ul>

БЛОГ НА HUSL

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

Ответы (0 шт):