为什么jQuery发布我的表单两次？

我使用jQuery发布表单，具体取决于按下哪个按钮。 我可以在firebug控制台中看到表单被发布了两次。谁能告诉我为什么会这样

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

去除
批准

这是因为您有两个提交处理程序，它们都执行相同的操作

---

演示：

因为您有2个提交事件侦听器，并且没有条件检查表单中提交了哪个按钮

我建议更改为一个提交事件侦听器（以确保只触发一个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

        });
});

---

试试这个

为什么有两个提交处理程序？这两个$（“#myForm”）。提交是错误的原因。@Ali7091虽然在许多情况下这样做是一个很好的做法，但在这种情况下，这没有什么区别，因为代码

e.preventDefault（）

已经在阻止默认提交操作。重复的事件处理程序是问题的原因。本例中声明的

按钮在哪里？@ADyson它不是。。。这只是所需逻辑的一个示例，不是一个完整的工作解决方案。我理解这一点，谢谢，但似乎不知道如何声明按钮。
$(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 

    }

    });
});