.submit()

.submit( handler(eventObject) ) 官网原E文: jQuery

描述L: 为 "submit" 事件绑定一个处理函数,或者触发元素上的 "submit" 事件。

  • version added: 1.0.submit( handler(eventObject) )

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.4.3.submit( [ eventData ], handler(eventObject) )

    eventData将要传递给事件处理函数的数据映射。

    handler(eventObject)每次事件触发时会执行的函数。

  • version added: 1.0.submit()

这个函数的第一种用法是 .bind('submit', handler) 的快捷方式,第二种用法是 .trigger('submit') 的快捷方式。

当用户试图提交表单时,submit事件将被发送到一个元素。它只能附加在<form>元素。表单可以通过点击一个明确的<input type="submit">, <input type="image">, 或者 <button type="submit">,或者当某些表单元素获取焦点时敲击Enter(回车键),都可以提交。

根据不同的浏览器,如果表单只能有一个文本字段,回车键可能只会导致一个表单提交,或仅当有一个当前的提交按钮。该接口不应该依赖于一个特定的行为,除非这一关键问题是通过观察就按下回车键KeyPress事件被迫的。(The interface should not rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of the Enter key.)

举例来说,请看下面的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() {
  alert('Handler for .submit() called.');
  return false;
});

现在当表单提交时,警告将被显示。出现这种情况的实际提交之前,所以我们可以通过调用事件对象的.preventDefault()或在处理函数中返回 false 来取消提交:

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

这些代码执行后,点击Trigger the handler 同样会警报显示。此外,默认的submit表单上的动作上会被触发,所以表格将被提交。

JavaScript的submit事件不会在Internet Explorer的泡沫。However, scripts that rely on event delegation with the submit event will work consistently across browsers as of jQuery 1.4, which has normalized the event's behavior.

Additional Notes:

  • 表单及他们的子元素不应该使元素名称或ID属性冲突,比如submit, length, 或 method。名称冲突可能会导致混乱的失败。对于一个完整的规则列表,并检查这些问题标记,看DOMLint

Examples:

Example: If you'd like to prevent forms from being submitted unless a flag variable is set, try:

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin:0; color:blue; }
  div,p { margin-left:10px; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.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() {
      if ($("input:first").val() == "correct") {
        $("span").text("Validated...").show();
        return true;
      }
      $("span").text("Not valid!").show().fadeOut(1000);
      return false;
    });
</script>

</body>
</html>

Demo:

Example: If you'd like to prevent forms from being submitted unless a flag variable is set, try:

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

Example: To trigger the submit event on the first form on the page, try:

$("form:first").submit();
jQuery 1.6 API 中文版Clove整理、修订