ボタンをクリックした後にAJAXが複数のリクエストを送信する

Question

jQueryコードでワンクリックを1つだけ送信したいとします。

私はこの同じ話題についてかなりの記事を読んだことがありますが、私は私とは異なると思います。私は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は、データをよ

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あなたはAjaxはVARで発射しているフラグを必要とし、その後、送信する前にそのVARをチェックし、以前のすべてのイベントハンドラをクリアしてからちょうど続きを読むhere