我有一个带有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>
如果你执行脚本,首先得到“第二”,然后是“第一”.
是否可以绑定新的提交事件并指定是否必须在任何现有事件之前调用该函数？
约束：
>必须保留现有事件.
>我无法删除现有事件,因为onsubmit属性的内容包含由Rails编写的非常复杂的逻辑
>(已添加)：事件应始终在任何现有的onsubmit事件和已绑定的事件(可能由其他插件绑定)之前执行
任何的想法？
解决方法
内联提交事件首先触发,您可以获取对它的引用,使表单元素上的onsubmit属性无效,然后绑定新的提交事件,这将执行您的旧提交处理程序：
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关键字,它将是表单元素本身.
如果您的原始onsubmit处理程序有一些验证行为,您可以通过var ret = oldSubmit.call(this)获取其返回值;
检查上面的示例here.