Question

我的网站上有一个注册提交按钮，由Jquery处理。问题是，我想阻止人们在注册帐户的过程中不止一次点击它。因此，我单击它后禁用click事件，除非出现错误，否则不要重新启用click。见bwlow

function registerClick() {
    $('#register_submit').off('click',registerClick);
    $.ajax( {
        type: "POST",
        url: "/ajax/register.ajax.php",
        data: $("#register_form").serialize(),
        success: function(data) {
            var result = jQuery.parseJSON(data);
            if (result.success) {
                alert('Account registered. You are now being transferred to Paypal for payment.');
                window.location = result.success;
            } else if (result.error) {
                alert(result.error);
                $('#register_submit').on('click',registerClick);
            } else {
                alert('Unhandled exception');
                $('#register_submit').on('click',registerClick);
            }
        } 
    }); 
    return false;
};

// signup
$('#register_submit').on('click',registerClick);

现在不幸发生的是，如果他们双击按钮，第二次点击会触发默认按钮操作，即将表单提交给＃。

我在想，也许我需要一起禁用按钮，但我是Jquery的新手，所以这对我来说是一个未知领域。

编辑：

我还应该提一下，这是按钮HTML（所以不是普通的提交按钮）。

 <input type="image" class="input_submit" id="register_submit" src="images/get_your_email.png" />

Answer 1

我会在单击按钮时向该按钮添加类，并在完成进程时删除类，并检查以确保该按钮没有禁用类。

$('#register_submit').on('click', function() {
   if($(this).hasClass("disable")) {
       return false;
   }
   else {
       $(this).addClass("disable");
       registerClick();
   }
});
function registerClick() {
    $.ajax( {
        type: "POST",
        url: "/ajax/register.ajax.php",
        data: $("#register_form").serialize(),
        success: function(data) {
            var result = jQuery.parseJSON(data);
            if (result.success) {
                alert('Account registered. You are now being transferred to Paypal for payment.');
                window.location = result.success;
            } else if (result.error) {
                alert(result.error);
                $('#register_submit').on('click',registerClick);
            } else {
                alert('Unhandled exception');
                $('#register_submit').on('click',registerClick);
            }
            remove_addedClass();
        } 
    }); 
    return false;
};
function remove_addedClass() {
    $("#register_submit").removeClass("disable");
}

即使action设置为.off，也禁用默认操作（返回false）

1 个答案: