Ajax提交多次

Question

我已經在php中創建了一個應用程序，我正在使用bootstrap模型使用AJAX更新用戶詳細信息。 現在有兩種形式：首先更新用戶的詳細信息，並向其他用戶添加評論。 當我嘗試向AJAX提交表單並且嘗試提交表單時，它不起作用，當我使用ajaxComplete函數時，我的表單數據已成功提交，但是在同一時間多次提交了表單。

 $(document).ajaxComplete(function() { $("#add-remarks").on('submit', (function(e) { e.preventDefault(); $.ajax({ type: "POST", url: $("#add-remarks").attr("action"), cache: false, context: this, data: $("#add-remarks").serialize(), //only input success: function(data) { var obj = JSON.parse(data); $("#add-remarks")[0].reset(); if (obj['msg'] == 'isuccess') { notification('insert'); } else { notification('error'); } } }); })); 

 <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="card-group-control card-group-control-right" id="accordion-model"> <div class="card"> <form method="post" name="update-user-details" id="update-user-details" action=""> <div class="row"> <div class="col-md-4"> <div class="form-group form-group-float"> <label class="d-block font-weight-semibold">First Name</label> <input type="text" class="form-control" placeholder="First Name" name="customer_name" id="customer_name"> </div> </div> <div class="col-md-4"> <div class="form-group form-group-float"> <label class="d-block font-weight-semibold">Mobile</label> <input type="text" class="form-control" placeholder="Mobile" name="mobile_number" id="mobile_number"> </div> </div> <button type="submit" class="btn bg-blue">Save Changes</button> </div> </form> <form method="post" name="remarks" id="remarks" action=""> <div class="row"> <div class="col-md-4"> <div class="form-group form-group-float"> <label class="d-block font-weight-semibold">Remarks</label> <input type="text" class="form-control" placeholder="Remarks" name="remarks" id="remarks"> </div> </div> <button type="submit" class="btn bg-blue">Save Changes</button> </div> </form> </div> </div> </div> </div> </div> 

Answer 1

將這段代碼移到ajaxComplete（）函數之外。 您可能會以某種方式多次觸發ajaxComplete函數，從而導致表單提交的多個事件偵聽器。

 $("#add-remarks").on('submit', (function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: $("#add-remarks").attr("action"),
      cache: false,
      context: this,
      data: $("#add-remarks").serialize(), //only input
      success: function(data) {
        var obj = JSON.parse(data);
        $("#add-remarks")[0].reset();
        if (obj['msg'] == 'isuccess') {
          notification('insert');
        } else {
          notification('error');
        }
      }
    });
  }));