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

非常感谢您提前！

- Chris

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

});

- Zoltan Toth

---

您可能还需要在错误事件上绑定它。用户应该能够再次尝试。 - Shyju

哦，谢谢你Zoltan！太简单了！天啊...我感到很惭愧！ :) - Chris

@Shyju - 成功函数中已重新绑定 :) - Zoltan Toth

@ZoltanToth：我猜Shyju的意思是如果ajax调用没有响应...就像代码在之前中断或类似的情况...可能吗？ - Chris

是的，我的意思是即使出现错误（一旦ajax响应返回），它也应该重新启用。感谢克里斯的澄清。 - Shyju

@Shyju 抱歉反应慢 :) 已更新为 complete - Zoltan Toth

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

});

- Joseph

---

哦，哇...谢谢Joseph提供这么详细的答案！那么，将.data设置为loading只在提交事件上起作用吗？目前我隐藏了表单的第一部分（4个输入框），显示了第二部分（另外4个输入框），然后在第二部分中，我希望使用提交按钮来提交整个表单...你觉得这样做不好吗？signup_step1.php只是检查值的正确性...当然，在提交整个表单时，需要再次进行检查，因为数据可能已经发生了变化... - Chris

@Chris jQuery的.data()可以被任何东西使用。我相信你那个表单问题需要另一个问题来解决。 - Joseph