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

请注意type此处：

<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>

submit中的form按钮将提交表单，无需JavaScript。因此，当您的处理程序被自动删除时，在下一次单击时，将发生默认处理（提交表单），由浏览器提供。

我怀疑，您在第一次点击时没有看到提交两次的表单的唯一原因是，提交表单的行为开始了拆除页面以腾出空间的过程提交结果。

FWIW，我建议您不在按钮上有一个click处理程序，而是表单上的submit处理程序，如果一切正常并且它＆＃39; s允许提交，禁用按钮并设置标志以防止将来提交表单，因为表单可以多种方式提交。（例如，在某些表单中，按文本字段中的Enter键即可。）

E.g：

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

Answer 2

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

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

<input id="saveCallListBtn" type="button" value="Save" class="button-med"/>

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

2 个答案: