フォームを送信した後、スクリプトが再度トリガーされます

Question

AJAX POSTスクリプトでボタンをクリックすると、スクリプトがもう一度トリガーされます。たとえば、アイテムを作成しようとすると、アイテムが2回以上作成されます。この問題を解決するには？

 

     $(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

ボタンをクリックするたびにスクリプトが実行されます。無効な属性を追加しても、クリックすることはなくなりますので、clickイベントが引き続きトリガーされます。ボタンが無効になっている場合は、あなたのハンドラの初めでは、チェックする必要があります：あなたは、フォームのsubmitイベントを使用した場合

$(document).delegate(".add_page_submit","click",function(e){ 
    e.preventDefault(); 
    if ($(this).prop('disabled')) return; 

それは違うだろう。その場合、無効な[type="submit"]ボタンをクリックしてもフォームのsubmitイベントは発生せず、上で指摘した手動チェックを行う必要はありません。