Question

当我点击带有AJAX POST脚本的按钮时，再次触发脚本。例如，如果我尝试创建项目，则会创建两次或更多次。如何解决这个问题？


      $(document).delegate(".add_page_submit","click",function(e){
        e.preventDefault();
        $(this).prop('disabled', true);
        var target = ".add_page_lightbox";
        var formData = new FormData($("#add_page_form")[0]);
        var content = editor.val();
        formData.append('content', content);

        var page_title = $("#add_page_form input[name='title']").val();
        var chapter_id = $("#add_page_chapter_select").val();

        $.ajax
        ({
          url: $root + 'php/add_page.php',
          type: "POST",
          data: formData,
          contentType: false,
          cache: false,
          processData:false,
          success: function(data)
          {
            if(data == 'sucsess')
            {
              alert(data);
              close_lightbox(target);

              $(".chapters_list .chapter_item[ch_id='" + chapter_id + "']").children(".pages_list").append("" + page_title + "Остановть");
            }
            else if(data == 'false')
            {
              alert(data);
            };
            $(this).prop('disabled', false);
          }
        });
      });

Answer 1

只要单击按钮，就会执行您的脚本。添加已禁用的属性并不会阻止您单击它，因此仍会触发$(document).delegate(".add_page_submit","click",function(e){ e.preventDefault(); if ($(this).prop('disabled')) return;事件。在处理程序的开头，你应该检查按钮是否被禁用：

submit

如果您使用表单的[type="submit"]事件，则会有所不同。在这种情况下，点击已停用的submit按钮不会触发表单的Intent intent = new Intent(); intent.setType("image/*"); intent.setAction(Intent.ACTION_GET_CONTENT); startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_REQUEST);事件，您也不必进行上面指出的手动检查。

Answer 2

为什么在发送下一个请求之前不验证它是否已提交？

赞：

var formSubmitted = false;
$(".add_page_submit").on('click',function(e){
  e.preventDefault();
  // returns if the form is submitting
  if(formSubmitted) return;

  //else, start submit
  formSubmitted = true;
  $(this).prop('disabled', true); //disables input
 /* do ajax stuff */
  $.ajax({
    url: $root + 'php/add_page.php',
    ...
    success: function(data){
      ...
      formSubmitted = false;
      $(this).prop('disabled', false); //re-enables input
      // here you can also clear the form

    }
  });


});

提交表单后，将再次触发脚本

2 个答案: