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

Question

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

Answer 1

请注意此处的类型:

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