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 调用的应答之前，如何禁用点击事件？因此，当您单击按钮时，由于添加了类，它不仅会“转换”为等待按钮，而且单击事件也会“暂停”...这可能吗？

非常感谢您!

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

});