.submit()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.submit()

分类:事件 > 表单事件 | 表单

返回: jQuery

.submit( handler )

描述:把某个事件处理函数绑定到JavaScript事件“submit”上,或者在某个元素上触发该事件。

加入于: 1.0
.submit( handler )
  • handler
    类型:FunctionEvent eventObject )
    一个函数,在每次事件被触发时执行它。
加入于: 1.4.3
.submit( [eventData ], handler )
  • eventData
    类型:Anything
    一个对象,它包含了要传递给事件处理函数的数据。
  • handler
    类型:FunctionEvent eventObject )
    一个函数,在每次事件被触发时执行它。
加入于: 1.0
.submit()

该签名不接受任何参数。

该方法,在第一种变体中,是.on( "submit", handler )的简写,在第三种变体中,是.trigger( "submit" )的简写。

当用户试图提交一个表单时,submit事件会发送到这个元素上。它只能附加到<form>元素上。既可以通过点击<input type="submit"><input type="image"><button type="submit">来提交表单,也可以在某些表单元素获得焦点时,按下Enter来提交表单。

根据不同的浏览器,Enter键只会导致提交一个表单,如果表单恰好有一个文本字段,或者当表单里有一个提交按钮时。这个接口不该依赖于针对这个键的一个特定行为,除非已经使用了keypress事件来监听Enter键的按下。

举个例子,设想下面的HTML:

<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>

该事件处理函数可以绑定到表单上。

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

现在,在提交表单的时候,会跳出提醒消息。这发生在实际提交前面,所以我们可以通过在事件对外上调用.preventDefault(),或者在我们的处理函数中返回false来取消提交操作。当别的元素被点击时,我们可以人为触发该事件。

$( "#other" ).click(function() {
  $( "#target" ).submit();
});

在执行代码之后,点击“Trigger the handler”也将显示这条消息。另外,将会引发表单上默认的submit操作,所以会提交表单。

JavaScript事件submit不会有Internet Explorer中冒泡。然而,自从jQuery 1.4,依赖于submit事件的事件委托的脚本,依然会跨浏览器一致地起作用,因为jQuery规范化了该事件的行为。

其它说明

  • 因为.submit()方法是.on( "submit", handler )的简写,所以可以用.off( "submit" )来分离。
  • 表单和它的子元素不能使用与一个表单属性相冲突的name或者id。名称冲突可能导致混乱错误。要想得到一个规则的完整列表,并针对这些问题检查你的标记,参见DOMLint

示例

如果你想防止表单被提交,除非设置了一个标识变量,试一试:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>submit demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text">
    <input type="submit">
  </div>
</form>
<span></span>
 
<script>
$( "form" ).submit(function( event ) {
  if ( $( "input:first" ).val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
 
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
});
</script>
 
</body>
</html>

演示结果

如果你想防止表单被提交,除非设置了一个标识变量,试一试:

$( "form" ).submit(function() {
  return this.some_flag_variable;
});

在网页的第一个表单上触发提交事件,试一试:

$( "form:first" ).submit();

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/submit.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。