jQuery Dialog가 여러 번 양식을 제출합니다.

Question

양식을 처음 제출할 때 어떤 이유로 작동합니다. 그러나 두 번째로 (페이지를 다시로드하지 않고) 양식을 제출하면 양식이 두 번 제출됩니다. 세 번째 시간을 제출하면 세 번의 제출을 ​​받게됩니다.

내가 뭘 잘못하고 있는지 모르겠다. (그리고 긴 게시물에 대한 죄송)

내 클릭 이벤트 :

$(document).ready(function() { 

    $('#new-post').click(function(event) { 

     event.preventDefault(); 

     $(this).newPost({ 
      title : 'New Post Form', 
      type : '1' 
     }); 

    }); 

}); 

내 플러그인 : 당신이 당신의 버튼을 클릭

(function($) { 

    $.fn.newPost = function(options) { 

     var defaults = { 
      container : '#post-popup', 
      title  : 'New Post', 
      type  : '' 
     }; 

     var settings = $.extend({}, defaults, options); 

     $(settings.container).dialog({ 
      autoOpen : false, 
      width  : 765, 
      modal  : false, 
      resizable : false, 
      title  : settings.title, 
      close  : function (event, ui) { $(this).dialog('destroy'); } 
     }).dialog('open'); 

     $(settings.container).submit(function() { 

      event.preventDefault(); 

      var form = $(settings.container); 

      var formData = { 
       postTitle : $('#title').val(), 
       postBody : $('#body').val(), 
       postType : settings.type 
      }; 

      $.ajax({ 
       type : 'POST', 
       url  : form.attr('action'), 
       data : formData, 
       success : function(data) { 
        $(form).get(0).reset(); 
        $(form).dialog('close').dialog('destroy'); 
       }, 
       error : function() { 
       } 
      }); 

      return false; 

     }); 

    }; 

})(jQuery); 

Answer 1

시간마다 때문에, 그것은 또 다른 양식 제출 첨부합니다. 나는 #new-post 버튼을 클릭 할 때마다 일부 데이터를 조립하고 새로운을 만들 수있는 아약스 요청을 보내려는 가정에서 일하고 있어요

$(document).ready(function() { 

    $('#new-post').click(function(event) { 

     $(this).newPost({ 
      title : 'New Post Form', 
      type : '1' 
     }); 

     return false; 

    }); 

}); 


(function($) { 

    $.fn.newPost = function(options) { 

     var defaults = { 
      container : '#post-popup', 
      title  : 'New Post', 
      type  : '' 
     }; 

     var settings = $.extend({}, defaults, options); 

     $(settings.container).dialog({ 
      autoOpen : false, 
      width  : 765, 
      modal  : false, 
      resizable : false, 
      title  : settings.title, 
      close  : function (event, ui) { $(this).dialog('destroy'); } 
     }).dialog('open'); 

     event.preventDefault(); 

     var form = $(settings.container); 

     var formData = { 
      postTitle : $('#title').val(), 
      postBody : $('#body').val(), 
      postType : settings.type 
     }; 

     $.ajax({ 
      type : 'POST', 
      url  : form.attr('action'), 
      data : formData, 
      success : function(data) { 
       $(form).get(0).reset(); 
       $(form).dialog('close').dialog('destroy'); 
      }, 
      error : function() { 
      } 
     }); 

    }; 

})(jQuery); 

: 당신이 다음을 달성하려고하는 나에게 보인다 post - 폼을 리셋합니다. 범인은 $(settings.container).submit(function() {이었습니다. 그 사람은 필요 없습니다. 버튼을 클릭 할 때마다 다른 이벤트가 할당되었으므로 버튼을 클릭 한 횟수만큼 많은 아약스 요청을 보았습니다.

Answer 2

당신이

1 시간을 .submit 다른 이벤트 핸들러를 등록 newpost 당신이 호출 할 때마다 당신은

$(settings.container).submit(function() { 
    event.preventDefault(); 
    //...... 
}); 

당신은 다시 버튼을 클릭 핸들러 제출 레지스터와

를 제출하는 또 다른 핸들러를 등록

$(settings.container).submit(function() { 
    event.preventDefault(); 
    //...... 
}); 

버튼을 클릭할수록 더 많은 제출 처리기가 양식에 첨부됩니다.