代码之家 › 专栏 › 技术社区 › 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 回复 | 直到 14 年前

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 7 年前

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前