问题描述
||
我试图将一些简单的逻辑包装到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); };