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

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


javascript jquery ajax bind unbind
person Tom    schedule 12.06.2011    source источник
comment
вы также должны проверить это со стороны сервера!   -  person Fortin    schedule 17.07.2014

Ответы (7)


arrow_upward
5
arrow_downward

просто отключи кнопку

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

а затем в функции успеха включите его

$("#id").removeAttr("disabled")
person Sruly    schedule 12.06.2011
comment
спасибо @sruly - но я использую div для кнопки :), поэтому не могу использовать attr и т. д. - но +1 - person Tom; 12.06.2011
comment
хорошо, изменил его на кнопку :) было немного проще, хотя .one() тоже был правильным - он не так хорошо играл :) - person Tom; 12.06.2011

arrow_upward
10
arrow_downward

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

person MacMac    schedule 12.06.2011
comment
Спасибо за ответ :) ? поэтому я могу использовать unbind после этого? - person Tom; 12.06.2011
comment
Нет, вам не нужно использовать функцию unbind, она сделает это за вас. Как говорит TheSuperTramp, лучше всего bind щелкнуть событие, если в запросе AJAX произошла ошибка. - person MacMac; 12.06.2011
comment
спасибо за ответ, но это, кажется, запрещает отправку ajax по клику пользователя? то есть он ничего не делает после нажатия на div? - person Tom; 12.06.2011
comment
Можно также добавить обратный вызов, чтобы убедиться, что асинхронный запрос обработан, и событие ожидает ответа. - person Pat; 10.10.2020

arrow_upward
2
arrow_downward

Самый простой способ - использовать флаг, который сбрасывается при успешном запуске:

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;
       }
    });
}
person rzetterberg    schedule 12.06.2011
comment
Это работает и для div. Если вы используете кнопку, вы можете использовать кнопку выше. В моем случае я использовал td. Это сработало для меня! +1 - person AVenger; 29.04.2014

arrow_upward
0
arrow_downward

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

см. этот вопрос модального диалога Jquery на SO

person Kinjal Dixit    schedule 12.06.2011

arrow_upward
0
arrow_downward

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

person Hasan Fahim    schedule 12.06.2011

arrow_upward
0
arrow_downward

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

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

person Nalum    schedule 12.06.2011

arrow_upward
0
arrow_downward

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

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

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

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

person WooDzu    schedule 12.06.2011