javascript - 弹出循环: Stop Duplication/Triplication/X When Adding Data

Question

任何人都可以帮助我跟踪在弹出表单中添加数据时导致重复/三重/x 的代码行吗？除了添加之外，新建/更新/删除功能都可以。

情况是，当我添加数据时，它应该保存一次(之前工作得很好)，但现在保存了两次或三次(例如，我们现在有 2 个相同的数据副本)..我正在添加另一个数据，它现在保存的数据数量是之前保存的数据数量的 x2 或 x3(所以我们现在有另外 4 个相同的数据副本)..见鬼!它应该只保存 2 个唯一数据，对吗？但我们现在有 2 + 4 个相同的数据副本。请帮忙..

这是html 文件:

<div id="man_contact_person">
<form id="form_client_contact" action="" method="post">
    <span id="client_d_result"></span>
    <table class="children_table">
        <th>
            <tr style="font-weight:bold">
                <td style="width: 10px"></td>
                <td>Person</td>
                <td>Position</td>
                <td>Contact No</td>
                <td>Archive?</td>
                <td></td>
            </tr>
            <tr>
                <td><input type="hidden" id="client_d_id" name="client_d_id" /><input type="hidden" id="client_h_id" name="client_h_id" /></td>
                <td><input type="text" class="form-control input-sm" id="person" name="person" placeholder="Full Name" style="width:200px;"></td>
                <td><input type="text" class="form-control input-sm" id="position" name="position" placeholder="Position" style="width:200px;"></td>
                <td><input type="text" class="form-control input-sm" id="contact_no" name="contact_no" placeholder="mobile/landline/wireless" style="width:200px;"></td>
                <td align="center"><?php input_checkbox('is_archive', ''); ?></td>
                <td align="center">
                    <input type="button" class="small_save" id="btn_add_client_d" name="btn_add_client_d" />
                    <input type="button" class="small_save" id="btn_save_client_d" name="btn_save_client_d" />
                    <input type="button" class="small_new" id="btn_new_client_d" name="btn_new_client_d" />
                </td>
            </tr>
        </th>
        <tbody id="client_children">
    </table>
</form>

这是 js 文件:

//some codes...

$(document).ready(function(){
    //some codes...

    $("#man_contact_person").dialog({ //the popup form
        autoOpen: false,
        width: 810,
        height: 500,
        modal: true,
        title: "Manage Contact Persons"
    });

    $("#btn_contact_person").click(function(){ //when calling popup form
         if ($("#message").is(":visible")){
            $("#man_contact_person").dialog( "open" );
            get_client_children($("#id").val());
        } else{
            if ($("#cname").val() != '' || $("#fname").val() != ''){
                $("#man_contact_person").dialog( "open" );
                get_client_children($("#id").val());
            } else{
                alert("Please save the client's data first.");
            }
        }
    });

    //some codes...
});

//some codes...

function reset_client_d(){ //resetting the fields
    $("#client_d_id").val('');
    $("#form_client_contact #person").val('');
    $("#form_client_contact #position").val('');
    $("#form_client_contact #contact_no").val('');
    $('#form_client_contact #is_is_archive').prop('checked', false);

    $("#btn_add_client_d").show();
    $("#btn_save_client_d").hide();
}

function client_d_add(client_h_id){ //adding data
    var params = 'client_h_id=' + client_h_id +
        '&person=' + $('#form_client_contact #person').val() +
        '&position=' + $('#form_client_contact #position').val() +
        '&contact_no=' + $('#form_client_contact #contact_no').val() + 
        '&is_archive=' + $('#form_client_contact #is_archive').val() + '';
    $.ajax({
        type: 'POST',
        url: 'client_d_add.php',
        data: params,
        success: function(data){
            get_client_children(client_h_id);
            $("#client_d_result").show();
            reset_client_d();
        }
    });
}

function get_client_children(client_h_id){ //display for popup form
    var params = 'client_h_id=' + client_h_id;
    $("#form_client_contact #is_is_archive").click(function(){
        $("#form_client_contact #is_archive").val(($("#form_client_contact #is_is_archive").prop("checked") ? "Y" : "N"));
    });
    $.ajax({
        type: 'POST',
        url: 'get_client_children.php',
        data: params,
        success: function(data){
            $('#client_children').html(data);

            $('#btn_save_client_d').hide();
            $('#btn_save_client_d').click(function(){client_d_update(client_h_id);});
            $('#btn_add_client_d').click(function(){client_d_add(client_h_id);});
            $('#btn_new_client_d').click(function(){reset_client_d();});

            $('.edit_client_d').click(function(){
                return client_d_select(this.id);
            });
        }
    });
}

//some codes...

Answer 1

好的，找到了:您正在多次分配点击处理程序:

$('#btn_save_client_d').click(function(){client_d_update(client_h_id);});

每次调用 get_client_children 时，都会添加一个新的点击处理程序，因此当单击保存按钮时，会多次调用保存函数。

通常，您应该在页面初始化时分配事件处理程序。

不要将 id 作为参数传递给保存函数，而是将其写入表单中的隐藏字段并与其他数据一起发布。

我会重复一遍:使用 JavaScript 和 AJAX 进行缩减。你的代码看起来相当过度引擎。