没有为所有元素附加事件侦听器

Question

我已将多个锚标记元素附加到我的文档，但只有第一个锚标记触发了我在 Javascript 文档底部的功能。

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>To-Do App</title>
  </head>
  <body>
    <div id="toDos"></div>
    <script src="js/todo-app.js"></script>
  </body>
</html>

Javascript:

let toDo = [{title: "groceries"},{title: "laundry"},{title: "cook dinner"},];
const filters = {searchText: ''}
const renderToDos = function (toDo, filters) {
  const filteredToDos = toDo.filter(function (todo) {
    return todo.title.toLowerCase().includes(filters.searchText.toLowerCase());
  });
  filteredToDos.forEach(function (todo) {
    const toDoElement = document.createElement('p');
    toDoElement.setAttribute('class', 'paragraph');
    const toDoDelete = document.createElement('a');
    toDoDelete.setAttribute('href', '#');
    toDoDelete.textContent = "Delete Item";
    toDoElement.textContent = todo.title;
    document.querySelector('#toDos').appendChild(toDoElement);
    document.querySelector('#toDos').appendChild(toDoDelete);
  });
}
renderToDos(toDo, filters);
// The function I'm trying to trigger with the remaining anchor tags
document.querySelector('a').addEventListener('click', function () {console.log("item deleted");});

Answer 1

为了澄清我评论中的一个错误，没有必要使用 Array.from() 来转换结果，因为 querySelectorAll returns 是 NodeList 而不是 HTML Collection.

NodeLists 有一个 built-in forEach 方法，所以在这个例子中不需要转换。但是，如果您想访问大多数其他数组方法，尤其是像 map 和 filter 这样的循环方法，则必须这样做。

我相信这种语法应该适用于您的代码：

document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', () => console.log('item deleted'))
})

Answer 2

我发现了另一个 Whosebug 问题，它试图做与您相同的事情。您可能想试试这个方法：

How to select all tag and register onclick event?

没有为所有元素附加事件侦听器

Event listener not being appended for all elements

javascript

event-listener

appendchild