Question

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

的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属性来调用doSomething。除非将它放在'doSomething'函数之外，否则永远不会调用此函数中的jQuery。

Answer 3

嗯，这里有很多话要说。

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

其次，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();
            });
    });

Answer 4

每次用户点击提交按钮时，您都会绑定新的“提交”回调。您根本不需要doSomething功能。试试这个：

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

...

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

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

4 个答案: