jQuery 在 .ajax() 之前只允许单击一次

Question

我试图允许只单击一次按钮，然后通过 ajax 提交一些数据。我面临的问题是用户可以点击50x并且每次都POST提交数据？

jQuery("#id").unbind('click');

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        location.reload(true);
    }
});

如何确保用户点击 #ID 100 次时数据仅提交一次？然后重新启用#ID？

Answer 1

您可以在 jQuery 中使用 .one() 函数。

jQuery("#id").one('click', function()
{
    jQuery.ajax({
        type: "POST",
        url: ajax_url,
        data: ajax_data,
        cache: false,
        success: function (html) {
            location.reload(true);
        }
    });
});

请记住，这将完全删除点击事件，即使您的ajax出现错误，您仍然无法再次点击它。

Answer 2

只需禁用该按钮

$("#id").attr("disabled", "disabled")

，然后在成功功能中启用它

$("#id").removeAttr("disabled")

Answer 3

最简单的方法是使用一个标志，当成功触发时该标志会重置：

if(clicked == False){
    clicked = True;
    jQuery("#id").unbind('click');

    jQuery.ajax({
       type: "POST",
       url: ajax_url,
       data: ajax_data,
       cache: false,
       success: function (html) {
           location.reload(true);
           clicked = False;
       },
       error: function () {
            alert("Error happened");
           clicked = False;
       }
    });
}

Answer 4

您可以禁用控制，或使用众多模态库之一来显示旋转轮，

请参阅此 Jquery 模式对话框问题

Answer 5

您可以在单击事件上禁用该按钮，并在 ajax 请求完成时重新启用它。

Answer 6

在您的点击事件中，您可以禁用该按钮，然后在 ajax 事件的成功函数中重新启用该按钮。

另一种选择是在被单击的元素上设置一个参数，以指示单击了按钮，然后检查是否设置了该参数，如果设置了，则不发送 ajax 请求，如果没有，则发送它。 ajax 完成后，您可以再次取消设置该参数以允许其运行。

Answer 7

试试这个：

$(document).ajaxStart({ function() {
 $('#submit_button').click(function(){
   return false;
 });
});

其中：#submit_button是你想要禁用的元素的ID，

该代码将禁用单击提交按钮