我需要避免双击提交行为.我正在使用不引人注目的库的客户端验证.我有以下代码来避免双重歧义：
jQuery.fn.preventDoubleSubmit = function () {
var alreadySubmitted = false;
return jQuery(this).submit(function () {
if (alreadySubmitted)
return false;
else {
alreadySubmitted = true;
}
});
};
jQuery('form').preventDoubleSubmit();
不幸的是,如果我的表单有一些可以验证的字段(例如一个必填字段),上面的代码仍然被触发,因此,即使我更正了表单上的任何错误,我将无法再次提交.
在验证成功完成后,如何触发双击代码？
解决方法
您也可以使用
JQuery One event.
我发现,通过双击快速,我可以得到最多的防守双击.使用一个事件是确保事件只被触发一次的唯一真正的方法.我不认为这种技术将使用输入type = submit标签“开箱即用”.相反,您只需使用输入类型=按钮或JQueryUI’s .button().
$("#submitButton").one("click",function(event) {
$('#theForm').submit();
});
如果您需要在验证错误(或其他情况)下重新连接事件,我建议您为事件处理程序创建一个函数.该函数在此示例中不是必需的,因为所有事件处理程序都提交表单,但在更复杂的情况下,您可能希望避免重复.
function submitClick(event) {
$('#theForm').submit();
}
$("#submitButton").one('click',function(event) {
submitClick(event);
});
// This handler will re-wire the event when the form is invalid.
$('#theForm').submit(function(event) {
if (!$(this).valid()) {
event.preventDefault();
$('#submitButton').one('click',function(event) { submitClick(event); });
}
});
如果您想向用户反馈该按钮不再工作,您可以在此处添加禁用代码.使用One事件的一个很大的副作用是您实际上不必使按钮被禁用,您可以使用自己的风格.
function submitClick(event) {
$('#submitButton').addClass('disabledButton');
$('#theForm').submit();
}
$("#submitButton").one('click',function(event) { submitClick(event); });
$('#submitButton').removeClass('disabledButton');
}
});
JQuery One Event：http://api.jquery.com/one/
