Как получить доступ к новым созданным элементам?

300

12 мая 2017, 17:06

Добрый день! Не могу разобраться как мне отследить новые элементы. Есть к примеру такая структура

<input type="text" class="count-check">
<div class="inbox">
<div class="item">
  <input type="checkbox">
  <p>Задача 1</p>
</div>

и сам скрипт

const input = document.querySelector('.count-check');
    const checkboxes = document.querySelectorAll('.inbox input')
    const list = document.querySelector('.inbox');
    function displayMatches(){
        let count = this.value;
        let div = document.createElement('div');
      div.className = "item";
      div.innerHTML = `<input type="checkbox">
                                     <p>${count}</p>`
        list.appendChild(div);
        this.value = ""
    }
    function handleCheck(e){
        console.log(e)
    }
    input.addEventListener('change', displayMatches);
    checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck))

Логика следующая: значение из текстового поля создает как бы новый блок с описанием задачи. Не могу понять как мне получить доступ к этим блокам которые были созданы?Эта функция не срабатывает

function handleCheck(e){
        console.log(e)
    }

Она отслеживает только тот элемент который изначально был.

Answer 1

Строка

checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck))

добавляет обработчики только тем чекбоксам, которые уже были на момент выполнения этого кода.

Для того, чтобы обработчик сработал на новом созданном элементе, его нужно добавить при создании:

function displayMatches(){
    let count = this.value;
    let div = document.createElement('div');
    div.className = "item";
    div.innerHTML = `<input type="checkbox">
                                 <p>${count}</p>`;
    list.appendChild(div);
    div.querySelector('input').addEventListener('click', handleCheck);
    this.value = ""
}