несколько вызовов 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

Всегда отменяйте привязку обработчиков событий после завершения привязки.Например,используйте .off () для прикрепленных событий .on ().

$('#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);