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

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

的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。我知道这是一个非常旧的版本，但由于公司的原因，我不能改变它。

来源

2013-02-05 sarcastyx

你想要做什么？ –

您不需要在onclicks中使用'javascript：'。 – Shawn31313

在回调函数中需要执行一些额外的处理，并通过'submit'按钮或另一个'button'提交表单。当我点击'button'时，回调永远不会被调用，表单永远不会被提交。 – sarcastyx

嗯，有许多东西在这里说。

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

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

来源

2013-02-05 03:46:43

谢谢。我知道我不需要'onclick'属性中的'javascript'，但是正在尽一切努力使它工作。另外对不起，我之前没有看到您的答案，并将另一个答案标记为正确的答案。感谢您的解释。 – sarcastyx

您是否能够在特定的时间范围内更改标记为正确答案的内容？我对这个网站并不熟悉。 –

对不起，我确实意识到你的是一个更好的答案。标记为答案。 – sarcastyx

应该

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

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

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

来源

2013-02-05 03:41:48

谢谢。这工作完美。 – sarcastyx

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

来源

2013-02-05 03:42:26 amof

发生了什么是每次用户单击提交按钮时都要绑定一个新的“提交”回调。你根本不需要doSomething功能。试试这个：

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

...

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

来源

2013-02-05 03:43:39 jaredjbarnes

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

回答

相关问题