Javascript 如何正确传递单击按钮属性值以形成提交事件？

我有一个功能，可以监听

单击

并从同一按钮形成

提交

，然后提交

放入

请求，如下所示：

按钮：

职能：

// PUT amend project function
$(document).on('click', '#amendProj', function () {

    // fetch clicked button placeholder value
    var fired_button = $(this).attr('placeholder');

    // await default validation before form submission
    $(document).on("submit", "#collapse" + fired_button, function (e) {

        e.preventDefault();

        // show loading spinner
        document.getElementById("spinner").hidden = false;

        //collect form data
        var params = {

        projectId: fired_button,
        projectManager: $("#selectionMan" + fired_button + " option:selected").text(),
        projectOwner: $("#selectionOwn" + fired_button + " option:selected").text(),
        predictedLaunch: document.querySelector('#preDate' + fired_button).value,
        actualLaunch: document.querySelector('#actDate' + fired_button).value,
        predictedCompletion: document.querySelector('#precomDate' + fired_button).value,
        actualCompletion: document.querySelector('#actcomDate' + fired_button).value,
        predictedCost: document.querySelector('#preCost' + fired_button).value,
        actualCost: document.querySelector('#actCost' + fired_button).value,
        price: document.querySelector('#charge' + fired_button).value,
        projectTitle: document.querySelector('#projTitle' + fired_button).value,
        projectDescription: document.querySelector('#projDescribe' + fired_button).value,
        requestor: document.querySelector('#projRequestor' + fired_button).value,
        requestorEmail: document.querySelector('#requestorEmail' + fired_button).value,
        requestorTel: document.querySelector('#requestorTel' + fired_button).value,
        status: $("#projStatus" + fired_button + " option:selected").text()
        }

        // Create XHR Object and send
        var xhr = new XMLHttpRequest();
        xhr.open('PUT', 'http://link/resource/api/Projects/' + fired_button, true)
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.send(JSON.stringify(params));

        // Handle errors
        xhr.onload = function () {

            if (this.status == 204) {

                // hide loading spinner
                document.getElementById("spinner").hidden = true;
                alert("Changes saved successfully!");
                console.log(this.status + ' Changes submitted successfully!');

            }

            else  {

                // hide loading spinner
                document.getElementById("spinner").hidden = true;
                alert("Your submission failed. Please try again");
            }
        }
    });

});

现在我有了默认的HTML验证，带有

required

。当我将某个字段留空并单击按钮时，浏览器将以默认验证消息响应。我更正输入，再次单击按钮，我的函数将执行两次或更多次，具体取决于我未能通过验证的次数。因此，根据我的代码，在成功执行后，将显示两次或更多次警报框。如何重构代码以避免这种行为发生？我不熟悉jquery和js，所以可能会遗漏一些东西

---

这感觉就像当我有一次验证失败时，函数仍在运行并等待执行。当我纠正错误后再次单击按钮提交时，它显然再次调用函数并执行，同时执行由于验证失败而未完成的函数。非常感谢专家的帮助，谢谢。

看起来您每次单击都在向collapse45添加提交处理程序。 通过添加以下行，可以清除任何现有处理程序：

$(document).off("submit", "#collapse" + fired_button);

行前：

$(document).on("submit", "#collapse" + fired_button...etc

---

不知道这是否是最好的解决方案，但它应该可以工作

每次单击时，您似乎都在向折叠45添加提交处理程序。如果验证失败，是否有方法取消提交处理程序？