jQuery 不会阻止表单提交答案

【问题标题】：jQuery not preventing form from being submittedjQuery 不会阻止表单提交
【发布时间】：2012-02-02 16:51:14
【问题描述】：

我想阻止使用 jQuery 提交表单，而是在用户想要提交时运行一个函数。

这是我的表单标记：

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input type="submit" value="Send"></p>
</form>

还有我的 Javascript 代码：

$('#msg-form').submit(function() {
    return false;
}

但是，当我按下提交按钮时，表单仍然会被发送并且页面会刷新。如何正确阻止表单提交？

【问题讨论】：

你最后缺少了)。我认为在您的真实代码中不是这种情况？另外，如果您在提交回调中添加alert("form submitted!")，它会被调用吗？
抱歉，我在处理帖子格式时一定搞砸了。我的真实代码没有语法错误，如果我用警报测试它，我永远不会看到警报，页面只会刷新。
你可能需要分享更多的代码，因为it works fine with proper syntax。
此代码不应提交表单。你做得很好。你确定你测试正确吗？
确保你的代码被调用（意味着提交回调真的被注册了），并且它真的选择了正确的形式（$('#msg-form').length == 1）

标签： javascript jquery forms

【解决方案1】：

似乎事件处理程序甚至没有执行，因此我假设找不到表单。尝试将您的代码包含在 DOM 准备好时执行的处理程序中。在 jQuery 中，它可以像这样简单地完成：

$(function(){
    $('#msg-form').submit(function(event) {
        event.preventDefault();
        // code executed when user tries to submit the form
    });
});

此外，正如您在上面看到的，您可以在提交表单时阻止表单的默认行为。

【讨论】：

【解决方案2】：

这行得通

<form action='' onsubmit="return false;">

这样

<form action='' onsubmit="doSomeWork();return false;">

【讨论】：

这是一个非常丑陋的解决方案，在大型应用程序中难以维护。

【解决方案3】：

submit 事件实际上并未绑定到表单元素。您可能在 DOM 加载后忘记绑定它！

将事件绑定放在$(document).ready(function() { 中或在页面底部加载脚本（在所有元素加载后）。

【讨论】：

【解决方案4】：

试试：

$("#msg-form").submit(function (e) {
    e.preventDefault();
});

【讨论】：

【解决方案5】：

你不能给用户一个真正的提交按钮，只能在验证后使用 JS 提交表单：

HTML

<form action="" method="post" id="msg-form">
    <p><textarea name="msg"></textarea><input id="submit" type="button" value="Send"></p>
</form>

JS

$('#submit').on('click', function() {
    // validate
    $('#msg-form')[0].submit();
});

【讨论】：

这不是真正的问题。
这可能不是他的方法的解决方案，但它是我知道有效的同一问题的替代方法。
@anstosa：在这种特定情况下，它可能也不起作用。告诉你我为什么知道？因为如果你把它放在<head> 中，没有传递要作为ondomready 或onload 的处理程序执行的脚本，它将找不到#submit，因为代码将在按钮可供检索之前执行.
@zizozu 这些只是代码 sn-ps，并不意味着是一个完整的解决方案。可以使用$(document).on('click', '#submit', function() { \\do stuff }); 这是the proper way to do it in jQuery 1.7+，将这样一个听众附加到头部。
@anstosa：这绝对不是正确的做法，如果你有#submit 在 DOM 准备好后立即可用 :) 为什么？因为它监听整个文档中的事件（称为事件委托，它涉及事件冒泡并检查事件的目标）。如果您真的需要使用事件委托（有时确实如此），您应该将document 替换为您确定会保留附加事件的元素的选择器，并且您确定@987654331 @ 元素将出现在其中（如果有的话）。这样你就可以限制你的影响。

【解决方案6】：

$('#msg-form').submit(function(e){ e.preventDefault(); });

【讨论】：