Javascript 已创建元素上的事件

在我的待办事项列表中，deleteButton和doneButton仅对预先制作的任务有效

他们不处理创建的元素，即使创建的元素与premade相同。我正在尝试使用vanila js

js:

var deleteButton=document.querySelectorAll（'.delete'）；
对于（i=0；i

html:

添加


自闭症



自闭症



自闭症

必须在创建元素后附加侦听器。 或者，您可以将侦听器附加到元素的父容器。

---

我想这个答案可以帮助你

我在add函数中传递了deleteButton和doneButton。我不知道这是否是最好的解决方案，但它是有效的，谢谢。可能重复的-见纯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;
})

<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>