用於編輯待辦事項列表中的任務的編輯按鈕無法正常工作

Question

我正在制作你典型的待辦事項列表練習項目，它的結構可能是你們大多數人都熟悉的。

您有項目，並且在每個項目中，用戶通過彈出表單添加任務。 每個任務都有一個用於刪除或編輯特定任務的按鈕。

當用戶單擊任務上的編輯時，會顯示一個彈出表單，其中包含任務的所有當前信息，可以對其進行編輯。

提交彈出表單后，它會按預期工作，更新信息，但僅適用於編輯的第一個任務。 不同任務的后續編輯也會編輯先前編輯過的任務。

我知道這與提交彈出表單的事件偵聽器有關。 聲明事件偵聽器的函數接受一個 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';
        })

Answer 1

能夠通過克隆表單並在每次創建事件偵聽器時刪除所有事件偵聽器來修復它。