Question

在我的 待办事项列表中，deleteButton 和 doneButton 仅适用于预制任务。

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

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

您必须在创建元素后附加侦听器。或者，您可以将侦听器附加到元素的父容器。我认为这个答案可以帮助你Attach event to dynamic elements in javascript

创建元素上的事件

1 个答案: