Question

If I click the Submit button once then the AJAX call is executed only once. This is perfect.

The problem is if I don't refresh the page and click the Submit button for the second time, then the AJAX call is executed twice. If I click the button for a third time without refreshing the page, the AJAX call is executed thrice.

What is wrong with my code? I want the AJAX call to be executed only once when I click the Submit button.

<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

The easiest tweak would be to remove the listener once you check that the form is valid:

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

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

from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    view = QtWebEngineWidgets.QWebEngineView()
    loop = QtCore.QEventLoop()
    view.loadFinished.connect(loop.quit)
    url = QtCore.QUrl("http://example.webscraping.com/places/default/search")
    view.load(url)
    view.show()
    loop.exec_()
    view.page().runJavaScript(''' document.querySelector("#search_term").value = '.' ''')
    view.page().runJavaScript(''' document.querySelector("#page_size option:checked").text = '100' ''')
    view.page().runJavaScript(''' document.querySelector("#search").click() ''')
    sys.exit(app.exec_())

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);

multiple ajax calls on button click if page is not refreshed jquery

4 个答案: