Javascript 闭包 - 表单提交在我告诉它之前被触发

Question

我试图将一些简单的逻辑包装到 javascript/jquery 闭包中以将表单绑定(bind)到 jQuery 验证。正常的代码看起来像这样......

// attach the jquery unobtrusive validator
$.validator.unobtrusive.parse("#formName");

// bind the submit handler to unobtrusive validation.
$("#formName").data("validator").settings.submitHandler = function() {
    viewModel.Save( $("#formName" ) );
};

效果很好。我只是想把它包起来，让它更干净。所以我写了这个。

(function ($){
    $.fn.submitHandler = function(callback){
        var container = $(this);
        // attach the jquery unobtrusive validator
        $.validator.unobtrusive.parse(container);

        // bind the submit handler to unobtrusive validation.
        $(container).data("validator").settings.submitHandler = callback(container);
        return true;
    };
})(jQuery);

所以不可避免的目标是我将来可以做到这一点。

$("#formName").submitHandler(function (e) {
        viewModel.Save(e);
    });

我知道这看起来很傻，但我认为这是了解更多信息的好机会。我最近刚刚了解了 Javascript 闭包并想尝试一下，感觉这是一个很好的测试对象。<​​/p>

问题是，如果我制作一个 HTML 表单并尝试将其绑定(bind)到它，它确实会像我想要的那样工作...但它会工作两次。首先，表单只是在页面加载时“发布”，然后它会执行我想要的行为并在此之后期望。

编辑

当我说表单“posts”时，我的意思是 Save 函数中的 alert 对话框会触发。似乎没有任何服务器回发。

这是我用来测试它的表格。

<form id="_formName" action="" method="post">
    <input type="text" required="required" />
    <button type="submit">Submit</button>
</form>

<script type="text/javascript">
    var viewModel = {
        Save: function ($form) {
            alert($form.attr('id'));
        }
    };

    $("#_formName").submitHandler(function (e) {
        viewModel.Save(e);
    });

</script>

Answer 1

我相信您的问题出在这一行:

// bind the submit handler to unobtrusive validation.
$(container).data("validator").settings.submitHandler = callback(container);

在这里，您打算将函数引用分配给“submitHandler”属性...但是，您实际上正在做的是调用该函数 使用参数“container”的“回调”，并将该评估表达式的结果分配给“submitHandler”属性......我不相信你打算这样做.

你可以试试这个(记住，我真的不知道你的具体情况，我只是根据我的推断):

// bind the submit handler to unobtrusive validation.
$(container).data("validator").settings.submitHandler = function() { callback(container); };