jQuery一个函数没有按预期工作

jQuery one function not working as expected

本文关键字：工作 函数 一个 jQuery      更新时间：2023-09-26

我有以下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函数上做错了什么。

注意此处的type：

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

jQuery one函数将只执行事件处理程序一次。但是，单击的元素的默认行为将无限期执行。

将按钮类型更改为button，使其没有默认行为：

<input id="saveCallListBtn" type="button" value="Save" class="button-med"/>
相关文章：