AJAX按鈕點擊後發送多個請求

Question

我只是想要一個點擊等於一個提交在我的jQuery代碼。

我已經閱讀了很多關於這個主題的文章，但我認爲我是不同的。我確實有一個mouseleave和focusout事件，我用它來查找用戶輸入中的錯誤。這些函數向下傳遞給提交多次的函數。我點擊mouseleave和focusout的次數越多，我的Ajax請求被提交的次數就越多。但我需要mouseleave和focusout繼續工作並檢查用戶輸入，這就是爲什麼我沒有使用one。請在下面看我的代碼，我認爲是提交多次爲handleButtonClicksAfterError

function getCreditAmountToSend(modal){ 
    console.log("getCreditAmountToSend"); 
    var checkBox = $(modal).contents().find("#fresh-credit-checkbox"); 
    checkBox.change(function(){ 
    if($(checkBox).is(":checked")) { 
     var creditAmount = +(sessionStorage.getItem("creditAmount")); 
     sessionStorage.setItem('amountToSend', creditAmount); 
    } 
    }); 
    var pendingCreditAmount = $(modal).contents().find("#pending_credit_amount"); 
    pendingCreditAmount.on({ 
    mouseleave: function(){ 
     if(pendingCreditAmount.val() != ""){ 
     adminForGetPendingCredit(modal); 
     } 
    }, 
    focusout: function(){ 
     if(pendingCreditAmount.val() != ""){  
     adminForGetPendingCredit(modal); 
     } 
    } 
    }); 
} 

function adminForGetPendingCredit(modal){ 
    console.log("adminForGetPendingCredit"); 
    var checkBox = $(modal).contents().find("#fresh-credit-checkbox"); 
    if(!$(checkBox).is(":checked")) { 
    var enteredAmount = +($(modal).contents().find("#pending_credit_amount").val()); 
    var creditAmount = +(sessionStorage.getItem("creditAmount")); 
    sessionStorage.setItem('enteredAmount', enteredAmount); 
    doWeDisplayError(modal,creditAmount, enteredAmount); 
    } 
} 

function doWeDisplayError(modal,creditAmount, enteredAmount){ 
    console.log("doWeDisplayError"); 
    $(modal).contents().find("#fresh-credit-continue-shopping").prop("disabled", false); 
    $(modal).contents().find("#fresh-credit-checkout").prop("disabled", false); 
    if(creditAmount < enteredAmount){ 
    $(modal).contents().find("#pending_credit_amount").val(""); 
    $(modal).contents().find("#fresh-credit-continue-shopping").prop("disabled", true); 
    $(modal).contents().find("#fresh-credit-checkout").prop("disabled", true); 
    displayError(); 
    } 
    else{ 
    handleButtonClicksAfterError(modal, enteredAmount); 
    } 
} 

function handleButtonClicksAfterError(modal, enteredAmount){ 
    // this is the problem!!!!!!!!!!!!! 
    console.log("handleButtonClicksAfterError"); 
    sessionStorage.setItem('amountToSend', enteredAmount); 
    var continueButton = $(modal).contents().find("#fresh-credit-continue-shopping"); 
    continueButton.click(function() { 
     modal.hide(); 
    }); 
    var checkoutButton = $(modal).contents().find("#fresh-credit-checkout"); 
    checkoutButton.click(function() { 
     console.log("handleButtonClicksAfterError"); 
     sendData(); 
    }); 
} 

function displayError(){ 
    console.log("displayError"); 
    $(function(){ 
    $("#fresh-credit-iframe").contents().find("#pending_credit_amount").attr("placeholder", "Whoops, that was too much"); 
    $("#fresh-credit-iframe").contents().find("#pending_credit_amount").attr({ 
     class: "form-control form-control-red" 
    }); 
    sessionStorage.removeItem('enteredAmount'); 
    }); 
} 

這是實際POST S中的數據

function sendData(){ 
    var amountToSend = sessionStorage.getItem("amountToSend"); 
    var products = $.parseJSON(sessionStorage.getItem("products")); 
    console.log("sendData"); 
    console.log("This is the amount to send " + amountToSend); 
    $.ajax({ 
     url: "/apps/proxy/return_draft_order", 
     data: {amountToSend, products}, 
     type: "POST", 
     dataType: "json", 
     complete: function(data) { 
     window.location.href = data.responseText; 
     console.log("This is the URL from poll " + data.responseText); 
     return false; 
     }, 
    }); 
} 

Answer 1

它結束了超級簡單的函數的函數。我只需要jQuery的off方法..我重視它的按鈕點擊之前，一切都桃色..看起來是這樣的：

checkoutButton.off().click(function(){}); 

off清除所有以前的事件處理程序，然後就用Click

很酷進行，以瞭解更多檢查出來here