jQuery确认框取消后表单仍提交问题求助

你的问题出在按钮的onclick逻辑和jQuery绑定的点击事件相互独立，导致confirm取消后，表单依然被提交。

为什么原来的代码会失效？ #

你给#recieve_btn同时设置了两种点击处理：

• 按钮自带的onclick="if(!confirm('Are you sure?')) return false;"：这个return false只能阻止a标签的默认跳转行为（但你的a标签href是javascript:void(0)，本来就没有跳转动作），无法阻止后续绑定的jQuery点击事件。
• jQuery的$(document).on('click', '#recieve_btn', function(){ $('#frm-list').trigger('submit'); });：这个事件会无条件执行表单提交，完全不受onclick里的confirm结果影响。

修复方案 #

把确认逻辑和表单提交逻辑合并到jQuery事件里，同时去掉按钮上的onclick属性，避免冲突：

1. 首先修改按钮代码，移除onclick：

<li><a id="recieve_btn" href="javascript:void(0)" class="btn animated infinite pulse"><span class="glyphicon glyphicon-transfer"></span> Recieve</a></li>

2. 然后修改jQuery代码，在提交前先判断confirm的结果：

$(document).on('click', '#recieve_btn', function(){
    // 先弹出确认框，只有点击确定时才提交表单
    if(confirm('Are you sure?')){
        $('#frm-list').trigger('submit');
    }
});

这样就能保证：点击确认框的确定时提交表单，点击取消时什么都不做，完全符合你的需求。

内容的提问来源于stack exchange，提问作者John Uy