我正在制作你典型的待辦事項串列練習專案，它的結構可能是你們大多數人都熟悉的。
您有專案，并且在每個專案中，用戶通過彈出表單添加任務。每個任務都有一個用于洗掉或編輯特定任務的按鈕。
當用戶單擊任務上的編輯時，會顯示一個彈出表單，其中包含任務的所有當前資訊，可以對其進行編輯。
提交彈出表單后，它會按預期作業，更新資訊，但僅適用于編輯的第一個任務。不同任務的后續編輯也會編輯先前編輯過的任務。
我知道這與提交彈出表單的事件偵聽器有關。宣告事件偵聽器的函式接受一個 ID 作為引數，該引數標識正在編輯的單個任務。似乎事件偵聽器針對之前呼叫過的所有任務執行。
該函式通過編輯按鈕的點擊事件呼叫。
我有點理解這里發生了什么，但我很難找到解決方案。
如何確保提交表單的事件監聽器一次只執行一項？
let edit = document.createElement('button');
edit.textContent = 'Edit';
edit.classList.add('edit');
edit.id = `edit-${item.id}`;
edit.addEventListener('click', (e) => {
let taskId = document.getElementById(e.target.id).parentNode.id;
setEditTaskFields(taskId);
setEditTaskEvents(taskId);
})
function setEditTaskEvents(taskId) {
const project = selectDisplayedProject()
const byId = project.items.map(e => e.id);
const task = selectDisplayedProject().items.filter(task => task.id == taskId)[0];
document.getElementById('edit-task-form').addEventListener('submit', ()=> {
let title = document.querySelector('#edit-task-form #title').value;
let description = document.querySelector('#edit-task-form .description').value;
let dueDate = document.querySelector('#edit-task-form #due-date').value;
document.querySelectorAll('#edit-task-form .priority-container input').forEach(radio => {
if (radio.checked) project.items[byId.indexOf(taskId)] = Item(title, description, dueDate, radio.value, selectDisplayedProject());
});
displayProject(selectDisplayedProject());
document.querySelector('.edit-task-popup').style.display = 'none';
})
uj5u.com熱心網友回復：
能夠通過克隆表單并在每次創建事件偵聽器時洗掉所有事件偵聽器來修復它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496347.html
標籤：javascript 形式 弹出 提交 编辑