如果页面未刷新，则多个ajax调用按钮单击jquery

Question

如果我单击“提交”按钮一次，则AJAX调用仅执行一次。太棒了。

问题是如果我不刷新页面并第二次单击“提交”按钮，则AJAX调用将执行两次。如果我第三次单击该按钮而不刷新页面，则会执行三次AJAX调用。

我的代码出了什么问题？我希望在单击“提交”按钮时只执行一次AJAX调用。

<form id="myForm">
  <div class="modal-dialog" role="document">
    <input type="hidden" name="buttonId" id="buttonId">
    <div class="modal-content">
      <div class="modal-body">
        <div class="input-group">
          <span id="commspan" class="input-group-addon">Comment</span>
          <input type="text" name="queuqOther" id="queuqOther" class="form-control">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnPause" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</form>

$('#btnPause').on('click', function() {
  var form = $("#myForm");
  form.validate();
  if (form.valid()) {
    $.ajax({
      async: true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },
      success: function(data) {
        console.log(data);
      }
    });
  }
});

Answer 1

最简单的调整是在检查表单有效后删除侦听器：

const $btnPause = $('#btnPause');
const handler = function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    // remove handler:
    $btnPause.off('click', handler);
    $.ajax({
      async : true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },                            
      success: function (data) {
        console.log(data);
      }
    });
  }
};

$btnPause.on('click', handler);

Answer 2

尝试使用click删除off()事件处理程序，如下所示

$('#btnPause').off('click').on('click',function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    $.ajax({
              async : true,
              crossDomain: true,
              url: "http://localhost/postdata",

              xhrFields: {
                 withCredentials: true
                },                            
              success: function (data) {
                console.log(data);
                  }
          });
    }
});

您还可以使用one()最多执行一次事件处理程序

$('#btnPause').one('click',function() {/* your code here */});

Answer 3

完成绑定后，始终取消绑定事件处理程序。例如。对.on（）附加事件使用.off（）。

$('#btnPause').off('click').on('click', function() {
//your Code Here
});

Answer 4

const $btnPause = $('#btnPause');
const handler = function() {
  var form = $( "#myForm" );
  form.validate();
  if(form.valid()){
    // remove handler:
    $btnPause.off('click', handler);
    $.ajax({
      async : true,
      crossDomain: true,
      url: "http://localhost/postdata",
      xhrFields: {
        withCredentials: true
      },                            
      success: function (data) {
        console.log(data);
      }
    });
  }
};

$btnPause.on('click', handler);