围绕硬编码处理程序包装 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

Answer 2

事件是不可预测的（以它们被触发的方式）。我认为受制于他们的搬运工也不能依赖秩序。因此，将处理程序绑定到更改先前添加的处理程序的事件肯定是（非常）不好的做法。实际上，正如您所建议的，您永远无法确定首先触发哪个处理程序。毕竟，事件不应该相互通知。应该使用事件和处理程序来避免代码的高度耦合。

解决这个问题的最好方法（考虑到你的限制）是用新的行为来装饰你的“旧”处理程序。 Bergi 发布了一个很好的例子。