Событие на созданном элементе

Question

В моем списке дел deleteButton и doneButton работают только для готовых задач.

Они не работают с созданными элементами, даже если созданные элементы такие же, как и у premade. Я пытаюсь использовать vanila JS .

ЯШ:

var deleteButton = document.querySelectorAll('.delete');

for(i = 0; i < deleteButton.length; i++){
      deleteButton[i].addEventListener('click', function() {
      var li = this.parentNode;
      li.classList.add('li-delete');
})
};

var doneButton = document.querySelectorAll('.done');
for (i = 0; i < doneButton.length; i++)

doneButton[i].addEventListener('click', function(){
   if (this.classList.contains('done-green')) {
      this.classList.remove('done-green');
   } else {
      this.classList.add('done-green');
   }
});

var add = document.querySelector('.add');

add.addEventListener('click', function(){
   var newLi = document.createElement('li');
   var input = document.querySelector('input');
   var ul = document.querySelector('ul');
   var newP = document.createElement('p');
   newLi.innerHTML = "<i class='icon-ok done'></i><i class='icon-trash delete'></i>"
   newP.appendChild(document.createTextNode(input.value));
   newLi.appendChild(newP);
   ul.appendChild(newLi);
   input.value = null;
})

HTML:

<div id="buttons">
  <input type="text" placeholder="your new task...">
  <button type="submit" class="add">add</button> 
 </div>
 <div id="tasks">
    <ul>
       <li><i class="icon-ok done"></i>
       <p>asd</p>
       <i class="icon-trash delete"></i></li>
       <li><i class="icon-ok done"></i>
       <p>asd</p>
       <i class="icon-trash delete"></i></li>
       <li><i class="icon-ok done"></i>
       <p>asd</p>
       <i class="icon-trash delete"></i></li>
    </ul>
 </div>

Answer 1

Вы должны прикрепить слушателя после создания элемента. Или вы можете прикрепить слушатель к родительскому контейнеру элементов. Я думаю, что этот ответ может помочь вам Присоединить событие к динамическим элементам в JavaScript