onclick ajax删除确认模式导致先前的请求ajax也处理

Question

我正在尝试使用 confirmation modal 引导程序制作 ajax delete。我的代码实际上可以工作，但是当我从浏览器使用dev tool 检查时，我意识到来自先前请求的值list_id 也在新的ajax 请求中处理（当我请求第一个ajax 时只有一个进程，第二个请求有两个进程与先前的也重复了，更多我请求ajax，以前也重复）。

更新：我尝试将confirmation modal 替换为javascript 中的基本confirm 并且效果很好，但我想使用confirmation modal 使其设计更优雅，所以我'我还在寻找什么问题。 这是我的尝试：

function bulk_delete()
{
    var list_id = [];
    $(".data-check:checked").each(function() {
            list_id.push(this.value);
            $(".data-check").removeAttr('checked');
    });

    if(list_id.length > 0)
    {
        if(confirm('Are you sure delete this '+list_id.length+' data?'))
        {
            $.ajax({
                type: "POST",
                data: {id:list_id},
                url: "<?php echo site_url('Mbarang/ajaxBulkDelete')?>",
                dataType: "JSON",
                success: function(data)
                {
                    if(data.status)
                    {
                        $('#myModal').modal('hide');
                        var tabelku = $('#tabel_data').dataTable();
                        tabelku.fnStandingRedraw();
                    }
                    else
                    {
                        alert('Failed.');
                    }

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });
        };
    }
    else
    {
        $('#myModal').modal('show');
        $('#conf_footer').html('<h5>no selected data</h5>');
        $('.cancel_delete').text('OK');
        $(".submit_delete").hide();
    }
}       

这个问题有解决办法吗？

这是我的 html 代码：

    <div class="container">
        <button class="btn btn-danger" onclick="bulk_delete()"><i class="glyphicon glyphicon-trash"></i> Bulk Delete</button>
        <br />
        <table id="tabel_data" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th style="width:2%;"><input type="checkbox" id="check-all"></th>
                    <th style="width:3%; text-align: center !important;">Number</th>
                    <th>Product Name</th>
                    <th>Categories</th>
                    <th style="width:15%;">Price</th>
                    <th style="width:15%;">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
            <tr>
                    <th style="width:2% !important;"></th>
                    <th style="width:3%; text-align: center !important;">Number</th>
                    <th>Product Name</th>
                    <th>Categories</th>
                    <th style="width:15%;">Price</th>
                    <th>Action</th>
            </tr>
            </tfoot>
        </table>
    </div>
    <!-- Modal confirmation delete -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-confirm">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="icon-box">
                        <i class="fa fa-exclamation"></i>
                    </div>              
                    <div id="conf_title"></div>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="kode" id="kodeData" value="" style="display: none">
                    <div id="conf_footer"></div>
                </div>
                <div class="modal-footer" id="delete_data">
                    <button type="button" class="cancel_delete btn btn-info" data-dismiss="modal">Batal</button>
                    <button type="button" class="submit_delete btn btn-danger">Hapus</button>
                </div>
            </div>
        </div>
    </div>

这是我的javascript：

//check all
$("#check-all").click(function () {
    $(".data-check").prop('checked', $(this).prop('checked'));
});

function bulk_delete()
{
    var list_id = [];
    $(".data-check:checked").each(function() {
            list_id.push(this.value);
    });
    if(list_id.length > 0)
    {
        $('#myModal').modal('show');    $(".submit_delete").show();
        $('#conf_title').html('<h4>Are you sure?</h4>');
        $('#conf_footer').html('<p>Are you sure delete <b>'+list_id.length+'</b> data?</p>');
        $('.submit_delete').text('Hapus');$('.cancel_delete').text('Batal');
        $('#delete_data').on('click','.submit_delete',function(){
            $.ajax({
                type: "POST",
                data: {id:list_id},
                url: "<?php echo site_url('Mbarang/ajaxBulkDelete')?>",
                dataType: "JSON",
                success: function(data)
                {
                    if(data.status)
                    {
                        $('#myModal').modal('hide');
                        var tabelku = $('#tabel_data').dataTable();
                        tabelku.fnStandingRedraw(); //reload table without change page
                    }
                    else
                    {
                        alert('Failed.');
                    }

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });
        });
    }
    else
    {
        $('#myModal').modal('show');
        $('#conf_footer').html('<h5>no selected data</h5>');
        $('.cancel_delete').text('OK');
        $(".submit_delete").hide();
    }
}   

这里是我的控制器：

function ajaxBulkDelete(){
$list_id = $this->input->post('id');
    foreach ($list_id as $id) {
            $this->Model->ajaxBulkDelete($id);
    }
    echo json_encode(array("status" => TRUE));
}

这是我的模型：

function ajaxBulkDelete($id){
        $this->db->where('id_barang',$id);
        $this->db->delete('mbarang');
}

Answer 1

我在我的代码中发现了问题：

$('#delete_data').on('click','.submit_delete',function(){

因为来自上一个请求的onclick 事件在下一个onclick 事件请求上仍然有效。相同的 active 名称类或 id onclick 事件也将在下一个请求中处理。我需要做的是制作offclick 事件：

$('.class_name').off('click'); -->jquery >= 3.0
$('.class_name').unbind('click'); -->jquery < 3.0

这是我更新的 javascript 代码：

//check all
$("#check-all").click(function () {
    $(".data-check").prop('checked', $(this).prop('checked'));
});

function bulk_delete()
{
    var list_id = [];
    $(".data-check:checked").each(function() {
            list_id.push(this.value);
    });
    if(list_id.length > 0)
    {
        $('#myModal').modal('show');    $(".submit_delete").show();
        $('#conf_title').html('<h4>Are you sure?</h4>');
        $('#conf_footer').html('<p>Are you sure delete <b>'+list_id.length+'</b> data?</p>');
        $('.submit_delete').text('Hapus');$('.cancel_delete').text('Batal');
        $('#delete_data').on('click','.submit_delete',function(){
            $.ajax({
                type: "POST",
                data: {id:list_id},
                url: "<?php echo site_url('Mbarang/ajaxBulkDelete')?>",
                dataType: "JSON",
                success: function(data)
                {
                    if(data.status)
                    {
                        $('#myModal').modal('hide');
                        var tabelku = $('#tabel_data').dataTable();
                        tabelku.fnStandingRedraw(); //reload table without change page
                        $('.submit_delete').off('click'); //solution
                    }
                    else
                    {
                        alert('Failed.');
                    }

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error deleting data');
                }
            });
        });
    }
    else
    {
        $('#myModal').modal('show');
        $('#conf_footer').html('<h5>no selected data</h5>');
        $('.cancel_delete').text('OK');
        $(".submit_delete").hide();
    }
}   

我从这个答案中找到了线索：https://stackoverflow.com/a/20054942/11628785

Answer 2

正如我在您的代码中看到的，您正在使用 submit_delete 类删除按钮，只需确保与之前的请求不应具有相同的类（submit_delete）。如果第一个请求具有相同的类，那么它也会执行该类。

在这里我建议尝试使用不同的类名而不是 submit_delete 类。有时类可能会与其他 HTML 冲突。