如何正確地將單擊的按鈕屬性值傳遞給表單提交事件？

Question

我有一個函數，可以監聽來自同一按鈕的click和表單submit ，並按照以下方式提交PUT請求：

按鈕：

<input type="submit" id="amendProj" placeholder="45" class="btn btn-dark" value="Save Changes">

功能：

// 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");
            }
        }
    });

});

現在，我已使用required進行了默認的HTML驗證。 當我將字段保留為空白並單擊按鈕時，瀏覽器將響應並顯示默認驗證消息。 我更正了我的輸入，再次單擊該按鈕，我的功能被執行兩次甚至更多，這取決於我通過驗證的次數失敗。 因此，按照我的代碼，這將導致警報框在成功執行后顯示兩次或多次。 如何重構代碼，這樣就不會發生這種情況？ 我是jquery和js的新手，因此可能缺少一些東西。

感覺好像一次驗證失敗時，該功能仍在運行並等待執行。 當我在更正錯誤后再次單擊該按鈕提交時，它顯然會再次調用該函數並與未完成執行的函數一起執行，因為驗證未成功。 非常感謝專家可以幫忙，謝謝。

Answer 1

似乎您每次單擊都在塌陷45中添加一個提交處理程序。 您可以通過添加以下行來清除任何現有處理程序：

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

前行：

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

不知道這是否是最好的解決方案，但它應該可以工作