предотвратить двойные клики по ссылкам с jQuery

Question

Как лучше всего предотвратить двойной щелчок по ссылке с jQuery?

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

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

Мне нужен атрибут disabled на кнопке. Но это не работает по ссылкам.

$('a').on('click', function(e){ 
    e.preventDefault(); 

    //do ajax call 
}); 

Answer 1

Хотя есть некоторые хорошие решения, метод, который я использовал, состоял в том, чтобы просто использовать <button class="link">, чтобы установить атрибут disabled.

Иногда простейшее решение лучше всего.

Answer 2

Вы можете использовать data- атрибуты, что-то вроде этого:

$('a').on('click', function() { 
    var $this = $(this); 
    var alreadyClicked = $this.data('clicked'); 
    if (alreadyClicked) { 
     return false; 
    } 
    $this.data('clicked', true); 
    $.ajax({ 
     //some options 
     success: function (data) { //or complete 
     //stuff 
     $this.data('clicked', false); 
     } 
    }) 
}); 

Answer 3

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

$(this).unbind('click'); 

Смотрите эту jsfiddle для справки Demo

Answer 4

Вы можете использовать для этого нужен фиктивный класс.

$('a#anchorID').bind('click',function(){ 
      if($(this).hasClass('alreadyClicked')){ 
       return false; 
      }else{ 
       $(this).addClass('alreadyClicked); 
       $/ajax({ 
        success: function(){$('a#anchorID').removeClass('alreadyClicked');}, 
        error: function(){$('a#anchorID').removeClass('alreadyClicked');} 
       }); 
      }}); 

Answer 5

Вы можете отключить ваши ссылки (например, href="#"), а также использовать click событие вместо переплетены по ссылке с помощью функции JQuery one().

Answer 6

Bind все ссылки с «кнопкой» класса и попробовать это:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); }); 
$(document).click(function(evt) { 
    if ($(evt.target).is("a[disabled]")) 
      return false; 
}); 

Answer 7

Вам нужно async:false

По умолчанию все запросы посылаются асинхронно (т.е. это устанавливается истина по умолчанию). Если вам нужны синхронные запросы, установите этот параметр в false.

$.ajax({ 
     async: false, 
     success: function (data) { 

     //your message here 
     } 
    }) 

Answer 8

Check this example. Вы можете отключить кнопку через атрибут CSS после первого щелчка (и удалить этот атрибут после запроса ajax или с помощью setTimeout) или использовать функцию jQuery.one() для удаления триггера после первого щелчка (без отключения кнопки)

var normal_button = $('#normal'), 
    one_button = $('#one'), 
    disabled_button = $('#disabled'), 
    result = $('#result'); 

normal_button.on('click', function() { 
    result.removeClass('hide').append(normal_button.html()+'<br/>'); 
}); 

one_button.one('click', function() { 
    result.removeClass('hide').append(one_button.html()+'<br/>'); 
}); 

disabled_button.on('click', function() { 
    disabled_button.attr('disabled', true); 
    setTimeout(function() { 
    result.removeClass('hide').append(disabled_button.html()+'<br/>'); 
    }, 2000); 
}); 

Answer 9

я пришел к следующей простой JQuery плагин:

(function($) { 
    $.fn.oneclick = function() { 
    $(this).one('click', function() { 
     $(this).click(function() { return false; }); 
    }); 
    }; 
    // auto discover one-click elements 
    $(function() { $('[data-oneclick]').oneclick(); }); 
}(jQuery || Zepto)); 

// Then apply to selected elements 
$('a.oneclick').oneclick(); 

Или просто добавить пользовательские atribute данных в HTML:

<a data-oneclick href="/">One click</a>