3

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

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？

4

7 回答 7

10

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

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

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

于 2011-06-12T17:08:36.420 回答
5

只是禁用按钮

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

然后在成功功能中启用它

$("#id").removeAttr("disabled")
于 2011-06-12T17:23:19.597 回答
2

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

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;
       }
    });
}
于 2011-06-12T17:11:30.803 回答
0

您可以禁用控制，或使用许多模态库之一来显示纺车

在 SO 上看到这个Jquery modal dialog question

于 2011-06-12T17:12:49.780 回答
0

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

于 2011-06-12T17:13:21.047 回答
0

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

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

于 2011-06-12T17:13:40.473 回答
0

试试这个：

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

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

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

于 2011-06-12T17:14:19.303 回答