Question

有时候我可以触发两次提交按钮。并且ajax也会被触发两次。

这是我的HTML代码：

<div class="buttons-area">
    <input id="step-two" class="btn btn-primary" type="submit" value="Next step »">
</div>

这是我的ajax：

<script>
    $(document).ready( function () {

        $('#step-two').on('click', function(e) {

            e.preventDefault();

            var formData = new FormData();

            formData.append('username', $('#username').val());
            formData.append('email', $('#email').val());
            formData.append('password', $('#password').val());
            formData.append('password_confirmation', $('#password_confirmation').val());

            $.ajax({
                url:         'registration',
                method:      'post',
                processData: false,
                contentType: false,
                cache:       false,
                dataType:    'json',
                data:        formData,
                beforeSend: function()
                    {
                        $(".validation-error-inline").remove();
                    }
                })
                .done(function(data) {

                    if (data.validation_failed == 1)
                    {
                        var arr = data.errors;

                        $.each(arr, function(index, value)
                        {
                            if (value.length != 0)
                            {

                                $("#"+index).closest(".middle").next(".right")
                                            .append('<span class="text-error validation-error-inline">' + value[0] + '</span>');

                            }
                        });

                    }


                })
                .fail(function(jqXHR, ajaxOptions, thrownError) {
                    alert('No response from server');
                });
                return false;

        });
    });
</script>

第一次点击后如何禁用按钮，只有在ajax完成后才允许下一次点击？

现在我可以在行中触发ajax两次，如果我很快并且显示两次相同的错误消息。

Answer 1

只需在$(this).attr("disabled", "disabled");之前添加return false。

如果要启用按钮，请$(this).removeAttr("disabled");。否则，按钮将被禁用，直到页面刷新。

Answer 2

您可以点击

停用该按钮

$('#step-two').on('click', function(e) {
 e.preventDefault();
$(this).prop('disabled',true); //disable further clicks
…

并在always()回调中启用，以便在请求后启用按钮，无论它是否成功。

$.ajax({
            url:         'registration',
            method:      'post',
            processData: false,
            contentType: false,
            cache:       false,
            dataType:    'json',
            data:        formData,
            beforeSend: function()
                {
                    $(".validation-error-inline").remove();
                }
            })
.done(function(){
   // code
 })
.fail(function(){
   // code
})
.always(function(data) {
 $('#step-two').prop('disabled',false); // re-enable the button once ajax is finished
})

Answer 3

尝试在点击处理程序的顶部添加以禁用按钮

$('#step-two').prop('disabled', true);

然后在return false之前添加此内容以重新启用它：

$('#step-two').prop('disabled', false);

Answer 4

$(document).ready(function () {

    $('#step-two').on('click', function (e) {
        $(this).prop('disabled', true); // <-- Disable here

        e.preventDefault();

        var formData = new FormData();

        formData.append('username', $('#username').val());
        formData.append('email', $('#email').val());
        formData.append('password', $('#password').val());
        formData.append('password_confirmation', $('#password_confirmation').val());

        $.ajax({
            url: 'registration',
            method: 'post',
            processData: false,
            contentType: false,
            cache: false,
            dataType: 'json',
            data: formData,
            beforeSend: function () {
                $(".validation-error-inline").remove();
            }
        })
            .done(function (data) {
            $('#step-two').prop('disabled', false); // <-- Enable here notice we're in a different scope so `$(this)` won't work

            if (data.validation_failed == 1) {
                var arr = data.errors;

                $.each(arr, function (index, value) {
                    if (value.length != 0) {

                        $("#" + index).closest(".middle").next(".right")
                            .append('<span class="text-error validation-error-inline">' + value[0] + '</span>');

                    }
                });

            }


        })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
            alert('No response from server');
        });
        return false;

    });
});

Answer 5

你必须在ajax调用后禁用你的按钮，如下所示：

$('#step-two').on('click', function(e) {
   var $button = $(this);
   $button.attr('disabled', 'disabled');

但是如果有必要，别忘了再次启用它。最好的方法是在“完成”功能中启用它

.done(function(data) {
  $button.removeAttr('disabled');
  ....

问候。

Answer 6

在点击事件中添加代码：

 $("#step-two").prop("disabled", true)

当ajax完成时：

$("#step-two").prop("disabled", false)

如何在jQuery中单击后禁用按钮

6 个答案: