jQuery Разрешить только один клик до .ajax ()

Question

Я пытаюсь разрешить нажатие кнопки только один раз, а затем некоторые данные будут отправлены через ajax. Проблема, с которой я сталкиваюсь, заключается в том, что пользователь может нажать 50 раз, и данные отправляются 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

Вы можете использовать функцию .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);
        }
    });
});

Имейте в виду, что это полностью удалит событие click, даже если у вас есть ошибка с вашим 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

попробуйте это:

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

где: # submit_button - это идентификатор элемента, который вы хотите отключить

этот код отключит нажатие на кнопку отправки

Answer 5

В вашем событии click вы можете отключить кнопку, а затем снова включить ее в функции успеха события ajax.

Другой вариант - установить параметр для элемента, по которому щелкаютукажите, что кнопка была нажата, а затем проверьте, установлена ​​ли она, не отправлять запрос ajax, если нет, то отправьте ее.Как только Ajax завершен, вы можете снова сбросить параметр, чтобы запустить его.

Answer 6

Вы можете отключить кнопку при событии щелчка и включить ее снова, когда запрос ajax будет выполнен.

Answer 7

Вы можете отключить управление или использовать одну из множества модальных библиотек, чтобы показать вращающееся колесо

см. Модальный диалоговый вопрос Jquery для SO