Question

我们在JavaScript中有一个表单绑定功能，比如

var formBind = function( event ) {
    event.preventDefault();
    var form = $(this);
    // some ajax post and validation portion here
    return false;
};

formBind在许多页面上用作$('form:visible').submit(formBind);

现在我要求在提交之前仅在特定页面上应用额外的确认框。如何在原始代码上进行最少的更改时添加该功能？

Answer 1

将原始formBind嵌套在新函数中

var formBind = function( event ) {
    event.preventDefault();
    var form = $(this);
    // some ajax post and validation portion here
    return false;
};

var additionalFormBind = function( event ) {
    var result = null;
    // do additional work before original formBind
    result = formBind( event );
    // do additional work after original formBind
    return result;
}

$('form:visible').submit(additionalFormBind);

Answer 2

在JavaScript中，您可以根据需要向函数调用或定义添加任意数量的参数 - 仅使用提供或匹配的参数。你可以改变这样的功能：

var formBind = function( event, showConfirm ) {
    event.preventDefault();
    var form = $(this);
    if (showConfirm) {
        //logic to display confirmation, followed by a call to the original ajax post if required
    } else {
        // some ajax post and validation portion here
    }
    return false;
};

调用此函数的所有现有位置都不会提供此参数，因此它将是未定义的，if将评估为false并保留原始功能。在新代码中，您可以根据需要提供true或false：

$('form:visible').submit(function(e) { return formBind(e, true); });

Answer 3

您可以使用jQuery的数据参数来传递额外信息。

$('form:visible').submit({ showConfirm: true }, formBind);

然后检查处理程序：

var formBind = function( event ) { event.preventDefault(); var form = $(this); if(event.data.showConfirm) { // confirmation code goes here. } // some ajax post and validation portion here return false; };

Answer 4

使用包含确认符的新函数包裹formsubmit函数。

$('form:visible').submit(confirmAndSubmit);

var confirmAndSubmit = function( event ) {
    event.preventDefault();
    return (window.confirm("Are You Sure?"))?formsubmit(event):false;
};

在JavaScript中扩展或覆盖函数

4 个答案: