javascript - 在硬编码处理程序周围包装 jquery 事件处理程序

Question

我有几种形式，如下所示:

<form id=myForm onsubmit="saveFormData(this);return false">
....
</form>

提交后，将执行自定义函数并取消默认操作(通过 http 发送数据)。

但现在我需要验证表单，如果验证正常，则触发自定义函数(在本例中为 saveFormData，但对于其他表单可能有所不同)，否则什么也不做。

所以最终的事件处理程序应该像这样工作:

$('#myForm').submit(function(){
    if(formValidatesOk(this))
        saveFormData() ;
    return false ;
}

但是，我无法更改 HTML 代码，因此我需要一种通用方法来重新定义 onsubmit 事件，方法是使用 jquery 事件处理程序包装硬编码处理程序。

我首先想到的是(未经测试):

var hardcodedHandler = $('#myForm').prop('onsubmit') ; // save the current handler
$('#myForm').prop('onsubmit',null) ; // remove the current handler
$('#myForm').submit(function(){
    if(formValidatesOk(this)) // if the form is valid then...
        Function(hardcodedHandler).call(this) ; // trigger the original handler
    return false ;
}) ;

但这不是很优雅(至少可以这么说)。

你知道更好的方法吗？

Answer 1

你可以只从元素的 onsubmit 属性中获取旧函数，你不需要 eval 它:

var form = $('#myForm');
var oldHandler = form.prop("onsubmit");
form.removeProp("onsubmit").submit(function(e){
    e.preventDefault();
    if(formValidatesOk(this))
        oldHandler.call(this, e);
});

Demo at jsfiddle.net