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电话的答案？ 因此，当您单击按钮时，由于添加了类，它不仅“转换”为等待按钮，而且点击事件也将“暂停”......这可能吗？

非常感谢你提前！

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

});