Question

我有一个jsp页面如下：

<script type="text/javascript" src="/mywebapp/js/jquery.js"></script>
<script type="text/javascript">         
 $( function() {  
  $('#testform').submit(function(){
   alert('now starting submit');
   return true;
  });

  $("#test1btn").click(function(){
   $('#testform #submit').click();    
  }); 
  $("#test2btn").click(function(){
   $('#testform').submit();    
  }); 
 });    
</script>
<form id="testform" method="post"  action="backend/search_test.do">
<input id="reqpagenr" name="reqpagenr" size="10">
<input type="button" id="test1btn"  value="TestClick"/>
<input type="button" id="test2btn"  value="TestSubmit"/>
<input id="submit" type="submit" value="Go">
</form>

当我手动点击（即使用鼠标）按钮“Go”时，在显示文本“now starting submit”后提交表单;单击“TestClick”按钮时，表单已成功提交，但文本“现在开始提交”没有出现;单击“TestSubmit”按钮时，会出现“现在开始提交”文本，但表单根本没有提交。

与我的预期相反，“TestClick”和“TestSubmit”按钮不起作用，因为单击两个按钮时“Go”按钮都会起作用。根据我的理解，三个按钮点击应该做同样的事情，即在文本“now starting submit”出现后提交表单。所以我的问题是，为什么三个按钮点击的结果不同？

我正在使用jquery 1.3.2

Answer 1

当通过$（'＃testform'）手动设置表单提交时，看起来jQuery提交事件处理程序被忽略了.submit（）;

这应该在点击处理程序中起作用：

$('#testform').trigger("submit")

Answer 2

第二个按钮不提交表单，因为jQuery（或DOM）中的错误导致submit方法失败，如果提交按钮的id为'submit'。请参阅：http://bugs.jquery.com/ticket/1414

Answer 3

<强>更新：

DEMO： http://aseptik.net/demo/html-form-submission-difference-between-click-submit-and-manual-click-in-jqu/

实际上richardml表示你遇到的第一个问题是jQuery Bug，所以首先要将提交的id重命名为其他内容。
第二个问题是 test1btn type的{{1}}应该是input，以便像普通的提交按钮一样行事。

诀窍是在鼠标悬停时更改类型，因此代码如下所示：

type="submit"

其余的按预期工作。

希望这个帮助

Answer 4

你应该使用onsubmit事件来触发函数。

<form id="testform" method="post" onsubmit="foo()" action="backend/search_test.do">

无论何时使用submit按钮或submit（）方法提交表单，都会触发foo（）。

html表单提交点击（），提交（）和手动点击jquery之间的区别

4 个答案: