如何让 Javascript 函数在新创建的元素上工作？ [复制]答案

【问题标题】：How to get a Javascript Function to work on newly created elements? [duplicate]如何让 Javascript 函数在新创建的元素上工作？ [复制]
【发布时间】：2019-09-17 01:59:12
【问题描述】：

我正在制作一个 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);
  }
});

【问题讨论】：

所以将事件绑定到新事件
@epascarello 最好委派
document.getElementById("container").addEventListener('click', function(e) { if (e.target.tagName==="SPAN") this.parentNode.remove(); });

标签： javascript

【解决方案1】：

您想委托活动。

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

【讨论】：