javascript - 如何让 Javascript 函数在新创建的元素上工作？

Question

我正在制作一个 2do 应用程序作为个人项目。我已经获得了删除 lis 并添加新 lis 的代码，但是当我单击“x”跨度时，新的 lis 不会自行删除。

// delete done todos
for (var i = 0; i < deleteTodo.length; i++) {
  deleteTodo[i].addEventListener('click', function(e) {
    this.parentNode.remove();
  });
}

// add a todo task
input.addEventListener('keypress', function(e) {
  if (event.keyCode === 13) {
    var newTodo = input.value;
    var newLi = document.createElement('li');
    newLi.innerHTML = '<span>X</span> ' + newTodo;
    this.value = '';
    console.log(newLi);
    ul.appendChild(newLi);
  }
});

标签： javascript

Answer 1

您想委托该事件。

document.addEventListener('click', (event)=>{
    if(event.target.matches('li')){
        // this will fire on any li tags that are clicked, even if dynamically added
    }
})