有回调函数时jQuery表单提交不起作用

Question

我已经为此搜索了很多，但似乎找不到解决方案。我遇到的问题是，当定义了callback 函数时，在button 上使用jQuery Submit 函数不起作用。例如，这是我拥有的一个小测试代码：

JavaScript

function doSomething() {
    alert("Called the function");

    jQuery("#form").bind("submit", function() {
        alert("Form was submitted.");
    });
}

HTML

<form id="form" action="">
    <input type="button" onclick="javascript: doSomething();" value="From Button">

    <input type="submit" onclick="javascript: doSomething();" value="From Submit">
</form>

现在，当我单击button 时，不会显示第二个警报。如果我单击submit，我会收到两条警报消息。我发现，如果我删除 callback 函数，那么表单提交与两个按钮都可以正常工作。我还尝试在表单上添加onSubmit，但这也不起作用。

我允许使用（并且不允许更改）的 jQuery 版本是 jQuery 1.3.2。我知道这是一个非常旧的版本，但由于公司原因，我不允许更改它。

Answer 1

应该是

jQuery("#form").bind("submit", function() {
    alert("Form was submitted.");
});

function doSomething() {
    alert("Called the function"); 
}

您需要在提交之前绑定submit 处理程序。在您的情况下，表单提交发生，然后您正在注册处理程序。

Answer 2

您会感到困惑，您只需要一个或另一个，因为您通过将 onclick 属性添加到 input 元素来调用 doSomething。除非您将它放在“doSomething”函数之外，否则永远不会调用此函数中的 jQuery。

Answer 3

发生的情况是，每次用户单击提交按钮时，您都会绑定一个新的“提交”回调。你根本不需要 doSomething 函数。试试这个：

var $submit = $("#submitButton").bind("submit", function(){
    console.log("submit");
});

...

<form>
     <input type="text" />
     <input type="button" />
     <input id="submitButton" type="submit" />
</form>

Answer 4

嗯，这里有很多话要说。

首先，您将“提交”处理程序绑定到表单——这是正确的，因为表单有一个“提交”事件，而不是按钮。

其次，HTML 标签不会提交表单，除非它们的类型是“提交”。这就解释了为什么绑定到表单的提交处理程序的处理程序没有运行。

第三，每次执行 .bind( ) 时，它都会将处理程序的另一个“副本”绑定到事件，所以当你最终点击标签时，它会执行多次。

第四，您不必在 onclick="" 属性中写入“javascript:”。事实上，最好的做法是将活动的 javascript 代码留在 HTML 之外，而是将事件绑定到传递给 jQuery 的函数中——就像你在上面所做的那样。见http://api.jquery.com/ready/

最后，由于您在提交前会发出警报，我猜您可能想取消表单提交——所以请查看http://api.jquery.com/event.preventDefault/

这里是 javascript 代码，可以满足您的实际需要：

    jQuery(function ($) {
            $('#form').submit(function (e) {
                    // do what you have to do
                    e.preventDefault();
            });
    });