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

如何解决Javascript闭包-在我告诉表单提交之前触发了表单提交

|| 我试图将一些简单的逻辑包装到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 \'，然后执行我想要并期望的行为。 编辑 当我说形式'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>

    

解决方法

        我相信您的问题出在这条线上：

// 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); };