Question

如果有人多次点击其中一个提交按钮，我想阻止多次提交。

在这种情况下unbind或undelgate如何调用我的自定义函数do_some_stuff只发生一次，因为我尝试了一些jquery方法，但我想我做错了什么。感谢

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

Answer 1

JQuery中不推荐使用Bind和unbind。

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

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

要回答有关多个提交的问题，JQuery 1.7中的另一个新增功能是.one()处理程序，它将事件处理程序附加到对象，但只允许它被触发一次。这样可以防止多次提交。

e.g：

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

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

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

Answer 2

cHao指出，有两种方法可以做到这一点。

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

或

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

Answer 3

当您单击该功能中的按钮时，添加attr（禁用），这将使按钮处于非活动状态。

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

应该阻止多次提交

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

Answer 5

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

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

Answer 6

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

Answer 7

这适用于提交

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

Jquery阻止多次提交

7 个答案: