我有以下jsp:
...
<script type="text/javascript">
$(function() {
// prevent multiple submissions
$('#saveCallListBtn').one("click", function() {
$('#callListForm').submit();
});
});
...
</script>
...
<form:form id="callListForm" commandName="callList" action="${contextPath}/calllist/save" method="POST" htmlEscape="true">
...
<td colspan="2" style="text-align: center">
<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>
</td>
...
</form:form>
我正在寻找的行为是无论单击保存按钮多少次,所有表单都只提交一次。使用 jQuery .one 函数,我可以让上面的代码正常工作。因为如果我点击多次,表单将提交多次。
下面的代码可以正常工作:
$('#saveCallListBtn').on("click", function() {
$(this).prop("disabled", true);
$('#callListForm').submit();
});
但我很想知道 .one 函数做错了什么。
最佳答案
请注意此处的类型
:
<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>
form
中的submit
按钮将提交表单,无需 JavaScript。因此,当您的处理程序被自动删除时,在下次单击时,由浏览器提供默认处理(提交表单)。
我怀疑,您在第一次点击时没有看到提交的表单两次的唯一原因是,提交表单的行为开始了拆除页面的过程,以便为提交结果。
<小时/>FWIW,我建议您不要在按钮上有一个click
处理程序,而是在表单上有一个submit
处理程序,如果一切顺利并且允许提交,则禁用该按钮并设置一个标志以防止将来的表单提交,因为表单可以通过多种方式提交。 (例如,在某些表单上,在文本字段中按 Enter 即可完成此操作。)
例如:
$("#callListForm").on("submit", function(e) {
var $btn = $("#saveCallListBtn");
var valid = !$btn.prop("disabled");
if (valid) {
// ...do any other validity checks you may want, set `valid` to false
// if problems encountered...
}
if (valid) {
$btn.prop("disabled", true);
} else {
e.preventDefault();
}
});
关于javascript - jQuery 一个函数没有按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33923717/