Question

我有一个onsubmit属性的表单。我需要绑定一个新的提交事件，我需要在任何现有的提交函数之前执行这个事件。

以下代码演示了此问题。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(function($) {
        // a plugin
        $('form').submit(function() {
          alert("Second");
        });
        // an other plugin
        $('form').submit(function() {
          alert("Third");
        });

        // this event must always be executed as first event
        $('form').submit(function() {
          alert("Always First");
        });
      });
    </script>
  </head>
  <body>
    <form onsubmit="javascript:alert('Fourth');">
      <p>
        <input type="submit">
      </p>
    </form>
  </body>
</html>

如果您执行脚本，首先获得“Second”，然后是“First”。

是否可以绑定新的提交事件并指定是否必须在任何现有事件之前调用该函数？

约束：

必须保留现有事件。
我无法删除现有事件，因为onsubmit属性的内容包含由Rails编写的非常复杂的逻辑
（已添加）：事件应始终在任何现有的onsubmit事件和已绑定事件之前执行（可能由其他插件绑定）

有什么想法吗？

Answer 1

首先触发内联提交事件，您可以获取对它的引用，使onsubmit元素上的form属性无效，然后绑定新的提交事件，此事件将执行您的旧提交处理程序：

  jQuery(function($) {
    var form = $('form'), oldSubmit = form[0].onsubmit;
    form[0].onsubmit = null;

    $('form').submit(function() {
      alert("First");
      oldSubmit.call(this); // preserve the context
    });
  });

请注意，我使用call方法来调用旧的提交处理程序，这是为了保留该函数内的this关键字，它本身就是form元素。

如果您的原始onsubmit处理程序具有某些验证行为，则可以通过var ret = oldSubmit.call(this);

获取其返回值

检查上面的示例here。

Answer 2

使用现有的submit处理程序并将其存储在变量中。

然后在新的处理程序中，调用从前一个submit处理程序存储的函数，并将新的函数重新分配给侦听器。

示例：

  jQuery(function($) {

    $('form').submit(function() {
         var first = this.onsubmit;
         //...
         first.call( this );
    });
  });

......或类似的东西。：=）

Answer 3

我认为this是一种更好的方法，如果它能够正常运作，因为OP接受了它。

是否可以在任何现有onsubmit / submit之前绑定submit（）函数？

3 个答案: