我有一张桌子,当你将鼠标悬停在它的行上时会有按钮。有一个删除按钮,可以调用自定义确认对话框;这基本上只接受在确认删除时它将执行的回调函数。
HTML如下:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<section>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doe, Jane</td>
<td>
<div>
25
<span class="actions">
<input type="button" value="Edit" class="btn-edit" />
<input type="button" value="Delete" class="btn-delete" />
</span>
</div>
</td>
</tr>
<tr>
<td>Doe, John</td>
<td>
<div>
35
<span class="actions">
<input type="button" value="Edit" class="btn-edit" />
<input type="button" value="Delete" class="btn-delete" />
</span>
</div>
</td>
</tr>
<tr>
<td>Smith, John</td>
<td>
<div>
30
<span class="actions">
<input type="button" value="Edit" class="btn-edit" />
<input type="button" value="Delete" class="btn-delete" />
</span>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<!-- popups -->
<div id="confirm-delete" class="popup confirm-dialog">
<h3>Delete</h3>
<div class="popup-content">
<p class="confirm-message">Are you sure you want to delete this item?</p>
<div class="buttons">
<input id="btn-delete-confirm" type="button" class="button btn-confirm" value="Delete" />
<input id="btn-delete-cancel" type="button" class="button btn-close-popup" value="Cancel" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</body>
</html>
JavaScript代码:
$(document).ready(function(){
var btnDelete = $('.btn-delete');
btnDelete.on('click', function(e){
var popUpId = 'confirm-delete',
btn = $(e.currentTarget),
item = $(e.currentTarget).closest('tr'),
header = 'Delete Item',
message = 'Are you sure you want to delete ' + item.find('.name').text() + '?';
customConfirm(popUpId, header, message, function(){ deleteItem(item); });
});
});
function customConfirm(id, header, message, callback){
var popUp = $('#' + id),
btnConfirm = popUp.find('.btn-confirm');
popUp.find('h3').html(header);
popUp.find('.confirm-message').html(message);
popUp.append('<div class="mask"></div>');
popUp.show();
btnConfirm.on('click', {popUpId: id, callBack: callback}, confirmClick);
}
function confirmClick(e){
e.data.callBack();
closePopUp(e);
}
当我点击一个项目的删除按钮并确认删除时,这个工作正常。但是当我点击某个项目的删除按钮然后取消它时,单击另一个项目的删除按钮并确认,这两个项目都被删除。每次我取消删除项目时都会发生这种情况。因此,如果我取消删除三项并确认删除下一项,则将删除四项。
非常感谢您的帮助。
谢谢:)
PS 这是jsfiddle链接:)
答案 0 :(得分:0)
我认为这应该有效.. 我已经修改了你的js代码
改变了这个
btnConfirm = popUp.find('.btn-confirm');
到
btnConfirm = $('#btn-delete-confirm');
答案 1 :(得分:0)
正在发生的事情是,对话框之前显示的click
处理程序仍然附加到其“确认”按钮。当您单击该按钮时,所有先前的处理程序都将被触发,因此所有先前的删除都将被确认。
您需要删除以前的处理程序,无论是在对话框被关闭时还是作为显示对话框的一部分。我认为,在展示表格时可能更容易摆脱它;在附加新的点击处理程序之前,您可以简单地说.off('click')
:
btnConfirm
.off('click')
.on('click', {popUpId: id, callBack: callback}, confirmClick);
答案 2 :(得分:0)
我之前遇到过这个问题,这不是我真正想过的事情,我很高兴我有机会帮助有人:
绑定.on()添加绑定,不替换它。所以它将执行你过去绑定它的所有内容。
简单解决方案:btnConfirm.unbind('click');
在绑定之前。