代码之家 › 专栏 › 技术社区 › Simone Carletti

是否可以在任何现有的onSubmit/Submit之前绑定submit()函数?

jquery javascript

Simone Carletti · 技术社区 · 15 年前

我有一张表格 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>

如果你执行脚本,首先你得到“第二”,然后“第一”。

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

制约因素:

必须保留现有事件。
无法删除现有事件,因为 事件 属性包含由Rails编写的非常复杂的逻辑
(已添加):该事件应始终在任何现有OnSubmit事件和已绑定的事件(可能由其他插件绑定)之前执行。

有什么想法吗?

3 回复 | 直到 15 年前

Christian C. Salvadó 15 年前

内联提交事件首先触发,您可以获取对它的引用,使 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 关键字在该函数内,它将是 形式 元素本身。

如果你的原件 事件 处理程序有一些验证行为,您可以通过 var ret = oldSubmit.call(this);

检查上面的示例 here .

Jacob Relkin 15 年前

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

然后在新的处理程序中,调用以前存储的函数 提交 处理程序,然后将新的处理程序重新分配给侦听器。

例子:

  jQuery(function($) {

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

…或者类似的。=)

Community CDub 8 年前

我想 this 是一个更好的方法,如果它工作,它应该是因为OP已经接受它。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前