jQuery 防止多次提交

Question

我想防止多次提交，如果有人多次点击提交按钮。

在这种情况下，如何使用`unbind`或`undelgate`来调用我的自定义函数`do_some_stuff`，因为我尝试了一些jQuery方法，但我认为我做错了。谢谢。

$(function() {
    $('div.ajax').delegate('form button', 'click', function(e) {
        $(this).do_some_stuff();
        e.preventDefault();
    });
});

- Azd325

Answer 1

在JQuery中，bind和unbind已经被弃用。

从jQuery 1.7开始，.on()方法是附加事件处理程序到文档的首选方法。

http://api.jquery.com/on/

另一个在JQuery 1.7中引入的新功能是.one()处理程序，它将事件处理程序附加到对象，但只允许它被触发一次。这将使您可以防止多个提交。

例如：

$("form#form1").one("submit", submitFormFunction);

function submitFormFunction(event) {
    event.preventDefault(); 
    $("form#form1").submit();
}

注意我绑定的是表单提交事件，而不是按钮点击事件。

- reach4thelasers

---

谢谢这个处理程序，它不仅救了我的生命，也保住了我的理智 :-) - Jim Amos

只是一个小笔误，你的例子使用了 .one() 而不是 .on()。 - GDW

@GDW：这不是打字错误或“拼写错误”（顺便说一句，这是个很酷的词！:))。.one()会附加一个只会触发一次的事件处理器。这就是答案中这部分的重点所在。 - cHao

那部分看起来有点... 奇怪。在我的看法里，它似乎每次都会提交。一旦处理程序提交表单并且被分离，就没有任何阻止默认操作的东西了。似乎您还需要附加一个更持久的处理程序，始终防止默认操作。 - cHao

.one似乎没有按预期工作。 假设您在submitFormFunction中有一个confirm()消息，这意味着仅当用户选择肯定时才执行代码。 第一次执行该方法时，该消息会出现，但是，如果您取消并再次提交，则第二次不会执行submitFormFunction。 相反，表单将被提交而不调用事件。 - Andre

Answer 2

指出了两种方法来实现这一点。

$('form button').prop('disabled', true);

或者

$('form button').attr('disabled', 'disabled');

- ncremins

---

如果你在意正确性，那么应该使用.prop('disabled', true)或者.attr('disabled', 'disabled')。 - cHao

Answer 3

当您单击函数内的按钮时，添加attr(disabled)属性将使按钮无效。

$("form Button").attr("disabled","1"); 

应该防止多次提交

- Simon

---

如果您使用.attr，应将值设置为'disabled'而不是1。 - cHao

Answer 4

如果您有用户坚持始终保持活动提交按钮，您可以使用变量来跟踪进度。类似这样的内容：

saving_record = 0; //set variable to show if form is in submission
$(document).ready(function () {
    $('#form').on('submit', function (e) {
        if (saving_record === 0) { //If not submitted yet, submit form
            saving_record = 1; //Set variable to show form is in submission
            $.ajax({
                success: function (data) {
                    saving_record = 0; //Reset variable to allow record update
                },
                error: function (data) {
                    saving_record = 0; //Reset variable to allow record update in case of error
                }
            })
        }
    });
});

- mukundi

Answer 5

这对我有效。

$(".button").on("click", (el) => {
    if (el.detail !== 1) { return; }

    // rest of your code here
});

el.detail 包含点击计数。任何 > 1 的值都将被忽略。

- SimonGoldstone

Answer 6

如果您正在使用ASP.NET MVC数据注释进行客户端验证，则必须首先验证表单 -

// To prevent multiple post
function buttonsubmit() {
    $('form').submit(function () {
        if ($('form').valid()) {
            $(this).find("input[type='submit']").prop('disabled', true);
        }
    });
}

- Abhishek Chandel

Answer 7

$(document).ready(function(){
  $('div.ajax form').submit(function(){
     $(this).do_some_stuff();
     return false;
   });          
});

- Noki

Answer 8

在我的情况下，one()事件不能防止多次提交。

改用以下代码：

    <script>
    $(document).ready(function (ev) {
        $("#SaveAndQuit").on('click', function (ev) {             
            var $form = $(this).closest('form');

            if ($form.valid()) {
                
                $(this).prop('disabled', true);

                // (optional: if multiple submit button, specify which one has been cliqued to the MVC controler)
                $form.append('<input type="hidden" name="SaveButton" value="SaveAndQuit" /> ');

                $form.submit();
            }
        });

    });

</script>

(Visual Studio 2017，MVC项目，Jquery 3.1.1)

- gharel

Answer 9

这个在提交时起作用

$("form").submit(function() {
    // submit more than once return false
    $(this).submit(function() {
        return false;
    });
    // submit once return true
    return true;
});

- JDE10