Javascript 将同一记录多次添加到数据库中，而不是仅添加一次

我对php脚本有一个问题，它添加了比预期更多的记录。我有一张大桌子，上面有几个“子表”，上面有人们的工资及其分布：

名称#工资率#分配#年度 约翰·史密斯#10000#20.00%#50000#编辑#删除
彼得·潘#100000#100.00%#100000#编辑#删除

添加新人员 当您单击NewPerson时，表单弹出，您键入所有信息，将person添加到数据库，ajax返回信息并将person添加到列表的末尾。问题是，当我点击一个“子表”添加人员时，它会添加一个人并正确打印，但当我转到第二个“子表”并添加一个人时，它会添加两个人（将两条相同的记录插入数据库），如果我点击第三个“子表”上的添加人员，它会添加一条记录三次。。。它应该只添加一次记录。以下是我的js脚本：

$('.addbtt').on('click', function(){
    value= "";
    document.getElementById("updform").reset();
    var glnumber = $(this).parent().parent().find('#glno').text();
    var objid = glnumber.substring(7,12);
    value += glnumber.substring(10,12);
    if(objid=='51001'){
        $('.modal-title').html("Add person - Full time");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51002'){
        $('.modal-title').html("Add person - Part time");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51009'){
        $('.modal-title').html("Add person - GA");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51010'){
        $('.modal-title').html("Add person - GE");
        $('#glnumber').empty().val(glnumber);
    };

    $('#updform').submit(function(){
        var formData = $(this).serialize();
        $.post('includes/updatesal.php',formData,processData);
        function processData(data){
            if(value == 01){
                $('#addperson1').before(data);
            }else if(value == 02){
                $('#addperson2').before(data);
            }else if(value == 09){
                $('#addperson3').before(data);
            }else if(value == 10){
                $('#addperson4').before(data);
            }else{
                alert("Your are doing something you shouldn't! :)") 
            };
        }; //end of processData
        return false;
    });
});

我认为问题在于我的“添加人员按钮”，因为它还向数据库添加了两条记录。以下是我的php函数：

$insertSQL1 = "INSERT INTO salaries (gl_number,name,pay_rate,distribution,annual)
                VALUES ('".$glnumber."','".$name."','".$payRate."','".$dist."','".$annual."')";
        $insertSQL1 .= "; SELECT SCOPE_IDENTITY() AS RECORD_ID";    
        $stmt1 = sqlsrv_query(Database::GetInstance()->databaseConnection, $insertSQL1);
        # IF THERE IS AN ERROR
        if(!$stmt1){
            echo "Error";   
        }else{
            $id = Database::GetInstance()->LastInsertId($stmt1);
        }
        # IF ALL QUERIES WERE SUCCSESSFUL, COMMIT THE TRANSACTION, OTHERWISE ROLLBACK
        if($stmt1 && !$errors){
            sqlsrv_commit(Database::GetInstance()->databaseConnection);
            # FREE THE STATEMENT
            Database::GetInstance()->FreeDBStatement($stmt1);

---

我已经花了一周的时间试图解决这个问题，有人能帮忙吗？

这个问题是由

.submit（）

事件处理程序在

.click（）

事件处理程序中引起的，因此每次单击都会创建一个新的、相同的

.submit（）

处理程序

要修复此问题，只需将

.submit（）

处理程序取出即可：

$('.addbtt').on('click', function(){
    value= "";
    document.getElementById("updform").reset();
    var glnumber = $(this).parent().parent().find('#glno').text();
    var objid = glnumber.substring(7,12);
    value += glnumber.substring(10,12);
    if(objid=='51001'){
        $('.modal-title').html("Add person - Full time");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51002'){
        $('.modal-title').html("Add person - Part time");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51009'){
        $('.modal-title').html("Add person - GA");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51010'){
        $('.modal-title').html("Add person - GE");
        $('#glnumber').empty().val(glnumber);
    };
});

$('#updform').submit(function(){
    var formData = $(this).serialize();
    $.post('includes/updatesal.php',formData,processData);
    function processData(data){
        if(value == 01){
            $('#addperson1').before(data);
        }else if(value == 02){
            $('#addperson2').before(data);
        }else if(value == 09){
            $('#addperson3').before(data);
        }else if(value == 10){
            $('#addperson4').before(data);
        }else{
            alert("Your are doing something you shouldn't! :)") 
        };
    }; //end of processData
    return false;
});

---

您还可以将表单清除脚本移动到“提交处理程序”的内部

---

您是否使用浏览器调试器（如firebug）？你看到两个帖子了吗？他们给出了正确的答案。我想给你一个建议：不要使用字符串连接来生成sql，这将导致sql注入$（'#updform'）.submit（function（）{var formData=$（this）.serialize（）；$.post（'includes/updatesal.php'，formData，processData'）；function processData（data）{…它应该可以工作。你是动态添加表单吗？尝试替换

$（'#updform'）。提交（function（）{

为

$（document）。在（'submit'，'#updform'，function（）{

$（document）。在（'submit'，'#updform'，function（）{}工作…我不明白为什么其他人没有创建

.submit事件处理程序（在JS中）在创建
#updform
元素之前（在HTML中）。使用
$（document）.on（'submit'，#updform
到
文档
上。您可能希望对
.addbtt
进行相同的处理。这正是发生的情况，表单是使用.load（）加载的因此，它是在.submit之后创建的。谁说
.addbtt
按钮是
#updform
？@Blazemonger的一部分，请注意代码中的注释（//如果按钮是submit，则无需单击处理程序）
// No need following on click handler, if button is submit
$('.addbtt').on('click', function(){

});

$('#updform').submit(function(){
value= "";
    document.getElementById("updform").reset();
    var glnumber = $(this).parent().parent().find('#glno').text();
    var objid = glnumber.substring(7,12);
    value += glnumber.substring(10,12);
    if(objid=='51001'){
        $('.modal-title').html("Add person - Full time");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51002'){
        $('.modal-title').html("Add person - Part time");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51009'){
        $('.modal-title').html("Add person - GA");
        $('#glnumber').empty().val(glnumber);
    }else if(objid=='51010'){
        $('.modal-title').html("Add person - GE");
        $('#glnumber').empty().val(glnumber);
    };

    var formData = $(this).serialize();
    $.post('includes/updatesal.php',formData,processData);
    function processData(data){
        if(value == 01){
            $('#addperson1').before(data);
        }else if(value == 02){
            $('#addperson2').before(data);
        }else if(value == 09){
            $('#addperson3').before(data);
        }else if(value == 10){
            $('#addperson4').before(data);
        }else{
            alert("Your are doing something you shouldn't! :)") 
        };
    }; //end of processData
    return false;
});