jQuery - 在提交表单之前询问用户答案

【问题标题】：jQuery - Ask user before submiting a formjQuery - 在提交表单之前询问用户
【发布时间】：2011-01-16 18:22:48
【问题描述】：

我有一个带有 2 个提交按钮的表单。

<input type='submit' name='submit-form' value='Send' />
<input type='submit' class='delete' name='delete' value='Delete' />

我想问用户，他是否真的想删除该项目。我知道可以通过将删除按钮设为链接来完成，但我确实需要这样做。

感谢您抽出宝贵时间，迈克。

【问题讨论】：

标签： jquery forms submit

【解决方案1】：

应该是这样的：

$('input.delete').bind('click', function() {
    if(!confirm('are you sure') )
        return false;
});

通过从事件处理程序返回false，它将触发event.preventDefault 和event.stopPropagation。

关于您的评论，我会采用这种方式为不同的输入设置不同的字符串：

$('input').bind('click', function(e) {
    var msg;

    switch(e.className)  {
         case 'foobar': msg = 'Foo foo foo!?'; break;
         case 'yay': msg = 'yay yay yay!?'; break;
         // etc
         default: msg = 'are you sure?';
    }

    if(!confirm(msg) )
        return false;
});

演示：http://www.jsfiddle.net/ks9Ak/

【讨论】：

只使用 event.preventDefault() 让事件冒泡不是更安全吗？
就是这样，谢谢。还有一个问题，有没有办法将用户的味精作为函数的参数传递，以防我想为另一个按钮使用不同的文本？
@DarkThrone：我不知道为什么这会更“安全”
@Mike：好吧，你当然可以这样做，但不能完全使用函数。您需要将event 对象传递给事件处理程序并检查id 或class，并基于此调用不同的文本。
如果他在返回 false 之后绑定另一个触发点击的事件，它永远不会发生，因为他停止了冒泡。至少我是这样理解的。

【解决方案2】：

$('input.delete').click(function(e){
    e.preventDefault();
    var action = confirm('do you want to delete the item?');
    if(action){
        //delete the item the way you want
    }
});

【讨论】：