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数据的功能

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

Answer 2

使用 async：false 阻止多个请求

 $(document).off('click').on('click', function(){
        $.ajax({
            type:'POST',
            url: ,
            async:false,
            cache: false,
            data:{}
             ,
            success: function(data){

            },
            error:function(data){
            }
        });   

    });

按钮点击后AJAX发送多个请求

2 个答案: