なぜjQueryは自分のフォームを2回投稿しますか？

Question

私はどのボタンが押されたかに応じてフォームを投稿するためにjQueryを使用しています。 フォームが2回転記されていることをFirebugコンソールで確認できます。誰がなぜこれが起こっているのか教えてもらえますか？あなたが2人の提出するイベントリスナーと無症状を持っているのでhttp://jsbin.com/luvenaxela/edit?html,js,output

Answer 1

あなたのフォームに送信されたボタンを確認する。

1つの送信イベントリスナー（1つのAJAXリクエストが確実に発生し、コードの重複が少なくなるように）を変更し、送信されたボタンを確認する条件を追加することをお勧めします。以下のような

何か：

$(document).ready(function() { 
$("#myForm").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax4.php"; 

    // Get the button name 
    var button = $(this).find("button[clicked=true]").attr('name'); 

    var formdata = $(this).serialize(); 

    switch(button){ 
     case "btn_add": 
      formdata += "&btn=btn_add"; 
      break; 
     case "btn_remove": 
      formdata += "&btn=btn_remove"; 
      break; 
    } 

    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
}); 

Answer 2

：あなたは、2つのハンドラと同じことを行う

デモの両方を提出する必要があるためにです

$(document).ready(function() { 
$("#myForm").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax4.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_add"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
}); 

$("#myForm").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax4.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_remove"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 
     }); 
    }); 

}); 

フォーム

<td> 
    <form id="myForm" class="myForm" action="\" method= "post" enctype="multipart/form-data"> 
     <input type="hidden" name="user_id" value=". $collab_userid." /> 
     <input type="hidden" name="id" value=".$upload_id." /> 

     <button type="submit" id="btn_remove" class="btn_remove" name= "btn_remove">Remove</button> 
     <button id="btn_add" class= "btn_add" name="btn_add">Approve</button> 
    </form> 
</td> 

Answer 3

$(document).ready(function() { 

$("#myForm button[type=button]").on('click',function(e) { //If btn pressed 
    e.preventDefault(); 

    var type = $(this).attr('name'); 

    if(type == 'btn_remove'){ 

     // Action on Remove button 

    }else if(type == 'btn_add'){ 

     // Action on add button 

    } 

    }); 
}); 

は、2つのハンドラを提出しなければならないのはなぜこの