Question

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

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

提交后，将执行自定义功能，并取消默认操作（通过http发送数据）。

但是现在我需要验证表单，如果它验证正常，那么在这种情况下触发自定义函数（saveFormData，但对于其他表单可能会有所不同），否则什么都不做。

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

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

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

我想到的第一件事就是（未经测试）：

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发布了一个很好的例子。

围绕硬编码处理程序包装jquery事件处理程序

2 个答案: