javascript - jQuery：单击禁用单击事件，直到来自 ajax 调用的响应

Question

在 jQuery 中执行以下操作：

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    $('#signup1').addClass("btn_wait");
    var btn_val = $('#signup1').val();
    $('#signup1').val('');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {

            //doing stuff here

        $('#signup1').removeClass("btn_wait");
        $('#signup1').val(btn_val);
        }
    });

});

在收到来自 ajax 调用的答复之前，如何禁用 click 事件？因此，当您单击按钮时，由于添加了类，它不仅“转换”为等待按钮，而且单击事件将“暂停”......这可能吗？

非常感谢您！

Answer 1

$('#signupbox1').on('click', '#signup1', function() {

    var str = $('#signupform').serialize();

    // make it look like a waiting button
    var btn_val = $('#signup1').val();
    $('#signup1').addClass("btn_wait").val('').unbind('click');

    $.ajax({
        type: "POST",
        url: "signup_step1.php",
        data: str,
        success: function(msg) {
            $('#signup1').removeClass("btn_wait").val(btn_val);
        },
        complete: function() {
            $('#signup1').bind('click'); // will fire either on success or error
        }
    });

});

Answer 2

您可以添加一个标志来表示“当前加载”。您可以使用任何变量、属性或属性。在这个例子中，我使用 jQuery.data()

此外，建议您submit在提交表单时使用事件而不是向提交按钮添加点击处理程序。

$('#signupform').on('submit', function() {

    var form = $(this),
        loading = form.data('loading'), //check loading status
        str, button, val;

    //if not loading
    if(!loading){

        //set loading to true
        form.data('loading',true);

        str = form.serialize();
        button = $('#signup1', form);
        val = button.val();

        // make it look like a waiting button
        button
            .addClass("btn_wait");
            .val('');

        $.ajax({
            type: "POST",
            url: "signup_step1.php",
            data: str,
            success: function(msg) {

                //remove loading state
                form.data('loading',false);

                //return button to normal
                button
                    .removeClass("btn_wait");
                    .val(val);
            }
        });
    }

});