删除前确认(jQuery)
问题描述:
我想在运行删除功能之前显示一个简单的确认对话框显示。删除前确认(jQuery)
这里是我迄今为止
HTML:
<!-- Delete Confirmation Dialog Box -->
<div id="confirm" style="display:none;">
<div class="message">Are you sure you want to delete?</div>
<div class="buttons">
<div class="cancel">No</div><div class="accept">Yes</div>
</div>
</div>
<!-- Delete Button/s -->
<a href="javascript:void(0);" onclick="delete("1")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>
<a href="javascript:void(0);" onclick="delete("2")"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>
...etc...
的jQuery:
function delete(id) {
fileName= 'update_db.php';
$('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait");
$.post(fileName,{postvar:1, id:id, action:'delete'}, function(res) { showStatus(res);});
}
有人能帮助我修改我的代码以显示对话框,确认删除??谢谢!!!
答
让你的链接调用一个函数来显示模态。将该ID保存在.data()中。然后连线取消并接受按钮上的方法。
另外,你应该考虑少突兀的JavaScript。因此,不应将onclick属性添加到链接,而应使用jquery绑定click事件。 (如 - ?$('a').click(function(){//foo});
<div id="confirm" style="display:none;">
<div class="message">Are you sure you want to delete?</div>
<div class="buttons">
<div class="cancel">No</div><div class="accept">Yes</div>
</div>
</div>
<!-- Delete Button/s -->
<a href="javascript:void(0);" onclick="showConfirm('1')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>
<a href="javascript:void(0);" onclick="showConfirm('2')"><img src="images/48x_delete.png" alt="48x_delete" width="24" height="24"/></a>
<script type="text/javascript">
$(function(){
$('#confirm .accept').click(function(){
delete($("#confirm").data('deleteId'));
$("#confirm").hide();
});
$('#confirm .cancel').click(function(){
$("#confirm").data('deleteId','').hide();
});
});
function showConfirm(id) {
$('#confirm').data('deleteId', id).show();
}
function delete(id) {
fileName= 'update_db.php';
$('#response').html("<img src='images/ajax-loader.gif' border=0> Please Wait");
$.post(fileName,{postvar:1, id:id, action:'delete'}, function(res) { showStatus(res);});
}
</script>
请问你目前的解决方案不起作用有一个错误是,它只是没有显示出来 – zigdon 2010-10-07 22:25:07
你可能想改变你的按钮'onclick'属性被正确引用 - ?'的onclick = “删除( '1')”' – 2010-10-07 22:37:08