如何解决未为所有元素附加事件侦听器
我在文档中附加了多个锚标记元素,但是只有第一个锚标记会触发我在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");});
解决方法
为澄清我的评论中的错误,由于Array.from()
返回NodeList而不是HTML集合,因此不必使用querySelectorAll
来转换结果。
NodeList具有内置的forEach
方法,因此无需在此示例中进行转换。但是,如果您想访问大多数其他数组方法,特别是map
和filter
之类的循环方法,则必须这样做。
我相信此语法应适用于您的代码:
document.querySelectorAll('a').forEach(el => {
el.addEventListener('click',() => console.log('item deleted'))
})
,
我发现了另一个StackOverflow问题,尝试与您做同样的事情。您可能要尝试这种方法:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。