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

Question

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

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

我希望询问用户是否真的要删除该项。我知道可以通过将删除按钮设置为链接来完成，但我确实需要以这种方式完成。

谢谢你的时间，Mike。

- Mike

Answer 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;
});

Demo: http://www.jsfiddle.net/ks9Ak/

- jAndy

---

仅使用event.preventDefault()让事件冒泡，这样会更安全吗？ - DarkThrone

这就是了，谢谢。只有一个问题，是否有一种方法可以将用户的消息作为函数的参数传递，以防我想要为另一个按钮使用不同的文本？ - Mike

@DarkThrone：我不知道为什么这会更“安全”。 - jAndy

@Mike：当然可以做到这一点，但不是通过一个函数实现。您需要将“事件”对象传递给事件处理程序，并检查“id”或“class”，并根据其调用不同的文本。 - jAndy

如果他在 return false 之后绑定了另一个点击事件触发，那么它永远不会发生，因为他停止了冒泡。至少我是这样理解的。 - DarkThrone

Answer 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
    }
});

- DarkThrone