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

jQuery Allow only one click before .ajax()

本文关键字：单击 一次 许单击 ajax jQuery      更新时间：2023-09-26

我试图允许一个按钮只点击一次，然后通过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？

您可以在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出现错误，您仍然无法再次点击它。

只需禁用按钮

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

然后在成功功能中启用

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

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

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

您可以禁用以控制，或者使用众多模式库中的一个来显示转轮

请参阅SO 上的Jquery模态对话框问题

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

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

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

试试这个：

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

其中：#submit_button是U要禁用的元素的id

该代码将禁止点击提交按钮

相关文章：