javascript - 为每个按钮触发事件侦听器

Question

渲染我的待办事项

const renderTodos = data => {
        data.forEach((todo) => {
            const year = todo.date.slice(0, 4)
            const month = todo.date.slice(5, 7)
            const day = todo.date.slice(8, 10)
            const newListItem = document.createElement('li')
            newListItem.setAttribute('class', 'todoItem')
            newListItem.innerHTML = `
                <div id="${todo._id}">
                    <h3 style="display: block">${todo.title}</h3>
                    <p>${todo.description}</p>
                    <p>Date Due - <span>${day} / ${month} / ${year}</span></p>
                    <button class="editBtn" id="${todo._id}">Edit</button>
                    <button class="deleteBtn" id="${todo._id}">Delete</button>
                </div>
            `
            todoContainer.appendChild(newListItem)
        })
        deleteTodo()
        editTodo()
    }

并编辑单个待办事项

const editTodo = () => {
    let allEditBtns = document.querySelectorAll('.editBtn')
    allEditBtns.forEach((btn) => {
        btn.addEventListener('click', ({target}) => {
            console.log(target)
            editContainer.style.display = 'flex'
            newTitleInput.value = target.parentElement.children[0].innerHTML
            newDescriptionInput.value = target.parentElement.children[1].innerHTML
            applyEditBtn.addEventListener('click', () => {
                console.log(target)
                fetch(`http://localhost:3000/todo/${target.id}`, {
                    method: 'PATCH',
                    body: JSON.stringify({
                        title: newTitleInput.value,
                        description: newDescriptionInput.value
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((data) => {
                    editContainer.style.display = 'none'
                    console.log(data)
                    return data.json()
                }).then(() => {
                    getTodos()
                }).catch((err) => {
                    console.log(err)
                })
            }) 
        })
    })
}

我的“editTodo”函数中的“applyEditBtn.addEventListener”块有问题。如果我编辑待办事项，它会起作用。当我编辑第二个或第三个待办事项等时会出现问题。发生的情况是，这个持有 fetch 查询的事件侦听器将触发的次数与它们实际上是“allEditBtns”的次数一样多。因此，如果我有 2 个待办事项（每个待办事项都有一个“编辑按钮”），我单击第一个，它编辑得很好，如果我单击编辑第二个待办事项，两个待办事项都将运行，但第一个待办事项数据被覆盖.. .所以我最终两个待办事项都持有相同的数据。我收集了它本质上发生的原因，因为 fetch 查询位于 foreach 方法中......但是当我将它移出这里时，我也无法让它工作。

我不太擅长解释，所以我希望有经验的人可以了解我的问题的要点或在提供的代码块中看到我的问题。

标签： javascriptnode.jsfetch-api