函数在第一次调用后执行两次 - 待办事项列表

问：

我的 JavaScript TODO 程序有问题，希望有人能为我指出正确的方向。

我想让用户能够添加存储不同待办事项/任务的“项目”。

问题是在成功添加第一个项目后，后续添加总是尝试添加一个额外的空字符串 “” 项目。该问题特别出现在添加项目的第二次迭代中。

我有一个带有 renderProjects（） 函数的 render.js 模块，该函数可以动态创建项目选项卡和一个用于添加新项目的按钮。用于添加项目模式的事件侦听器绑定到此按钮。

我怀疑问题出在我的代码结构上，导致事件侦听器被多次绑定，导致不需要添加一个空字符串项目。

如何修改代码以确保事件侦听器仅绑定一次，并且后续项目添加功能正常运行？

现场演示（如果您在添加第二个项目后查看控制台，您应该会看到一个控制台 .log，上面写着“项目标题不能为空”）

**这是我的 renderProjects 函数 = **

const renderProjects = function() {
        while (tabContainer.firstChild) {
            tabContainer.removeChild(tabContainer.firstChild);
        }

        allProjectsArr.forEach((project, index) => {
            const newTab = document.createElement("button");
            newTab.textContent = `${changeCase(project)}`;
            newTab.classList.add("tab-btn");
            newTab.setAttribute("data-for-tab", `${index + 1}`);
            tabContainer.appendChild(newTab);
        })

        const addProjectBtn = document.createElement("button");
        addProjectBtn.classList.add("add-project-btn");
        tabContainer.appendChild(addProjectBtn);

        const addProjectIcon = document.createElement("img");
        addProjectIcon.src = addFolderImg;
        addProjectIcon.alt = "add folder image"
        addProjectIcon.classList.add("add-project-icon", "nes-pointer");
        addProjectBtn.appendChild(addProjectIcon);

        addProjectBtn.addEventListener("mouseenter", () => {
            addProjectIcon.src = addFolderImgActive;
        })
        addProjectBtn.addEventListener("mouseleave", () => {
            addProjectIcon.src = addFolderImg;
        })
        
        addProjectBtn.addEventListener("click", () => {
            modalController.addProjectModal();   // Is this causing the issue?
        })
    };

**这是我的addProjectModal函数= **

const addProjectModal = function () {
        const addProjectDialog = document.getElementById("add-project-dialog");
        const form = document.querySelector(".add-project-form");
        addProjectDialog.showModal();

        form.addEventListener("submit", (e) => {
            e.preventDefault();
            const warning = document.querySelector(".warning-result");

            // If Cancel - Close & Reset form, if cancel btn pressed
            if (e.submitter.id === "add-project-cancel"){
                addProjectDialog.close();
                form.reset();
                return;
            // If Confirm - Obtain title value & add project
            } else if (e.submitter.id === "add-project-confirm"){
                const title = document.getElementById("add-project_field").value;
                if (title === ""){
                    // Being called twice??
                    console.log("project title can't be empty");
                    return;
                }
                let addedProject = addProject(title);
                if (!addedProject){
                    form.reset();
                    warning.textContent = "Project Name Taken";
                } else if (addedProject) {
                    warning.textContent = "";
                    addProjectDialog.close();
                    form.reset();
                } else {
                    console.log("uh oh ")
                }
            }
        })