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

Question

我试图将一些简单的逻辑包装到javascript/jquery闭包中以将表单绑定到jQuery validate.普通代码看起来像这样......

// 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闭包并想尝试一下,这对于测试它感觉是件好事.

问题是,如果我创建一个HTML表单并尝试将其绑定到它,它确实像我想要的那样工作......但它可以工作两次.首先,表单只是在页面加载时"发布",然后它会执行我想要的行为并在此之后进行预期.

编辑

当我说'posts'形式时,我的意思是函数中的alert对话框Save会触发.APPEAR没有任何服务器回发.

这是我用来测试它的表单.

<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" 调用函数 "callback",并将该求值表达式的结果赋值给"submitHandler"属性......我不相信你有意这么做.

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

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