我正在尝试使用delete引导程序来制作ajax confirmation modal。我的代码确实有效，但是当我从浏览器中使用dev tool进行检查时，我意识到上一个请求的值list_id也会在新的ajax请求中处理（当我仅请求第一个ajax一个过程时，第二个请求有与先前的两个过程也重复，更多的我请求ajax，先前的也重复）。
更新：我尝试用confirmation modal中的基本confirm替换javascript，它工作正常，但是我想使用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">×</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');
}
答案 0 :(得分：0)
正如我在您的代码中看到的那样，您正在使用 submit_delete 类删除按钮，只需确保与先前的请求不应具有相同的类（submit_delete）。如果第一个请求具有相同的类，则它将也执行该类。
在这里，我建议尝试使用不同的类名，而不是 submit_delete 类。有时类可能与其他HTML冲突。
答案 1 :(得分：0)
我在的代码中发现了问题：
$('#delete_data').on('click','.submit_delete',function(){
因为上一个请求中的onclick个事件在下一个onclick事件请求中仍然处于活动状态。相同的活动名称类别或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