编辑按钮在待办事项列表中编辑任务无法正常运行

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

每次创建一个人时，都可以通过克隆表单并删除所有事件听众来修复它。