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 100x，我该如何确保数据仅提交一次？然后重新启用#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 modal dialog question on SO

Answer 5

您可以在点击事件上禁用该按钮，并在完成ajax请求时将其启用。

Answer 6

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

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

Answer 7

试试这个：

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

其中： #submit_button 是您要禁用的元素的ID

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

jQuery之前只允许单击一次.ajax（）

7 个答案: