JQuery - Как временно отключить прослушиватель событий onclick после того, как событие было запущено?

Ответ 1

Есть много способов сделать это. Например:

$(".btnRemove").click(function() {
    var $this = $(this);
    if ($this.data("executing")) return;
    $this
        .data("executing", true)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeData("executing");
    });
});

или

$(".btnRemove").click(handler);

function handler() {
    var $this = $(this)
        .off("click", handler)
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.click(handler);
    });
}

Мы также можем использовать делегирование делегирования для более четкого кода и повышения производительности:

$(document).on("click", ".btnRemove:not(.unclickable)", function() {
    var $this = $(this)
        .addClass("unclickable")
        .attr("src", "/url/to/ajax-loader.gif");
    $.get("/url/to/django/view/to/remove/item/" + this.id, function(returnedData) {
        // ... do your stuff ...
        $this.removeClass("unclickable");
    });
});

Если нам не нужно повторно активировать обработчик после его выполнения, мы можем использовать метод .one(). Он связывает обработчики, которые должны выполняться только один раз. См. JQuery docs: http://api.jquery.com/one

Ответ 2

Как долго вы хотите отключить прослушиватель событий щелчка? Один из способов - отключить прослушиватель событий, используя jQuery unbind http://docs.jquery.com/Events/unbind.

Но лучше всего не отвязывать событие только для повторного его перебора. Вместо этого используйте boolean.

var active = true;
$(".btnRemove").click(function(){
   if(active){
       return;
   }
   active = false;
   $(this).attr("src", "/url/to/ajax-loader.gif");
   $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data){
        active = true; // activate it again !
        $.each(returned_data, function(i, item){
              // do stuff                       
     });
   }
});

edit:, чтобы быть в безопасности, вы также должны заботиться о других процедурах завершения ajax (их всего три: success, error, complete см. docs), иначе active может оставаться ложным.

Ответ 3

почему бы не отключить кнопку? Любая конкретная причина, по которой вы хотите отключить этот список? BTB, из вашего кода, я вижу, что вы делаете ajax-вызов. Так вы специально хотите заблокировать пользователя, пока не вернется звонок? Если да, вы можете попробовать blockUI, плагин jQuery

Ответ 4

Я бы установил глобальную переменную, чтобы отслеживать запросы AJAX...

var myApp = {
  ajax: null
}

И тогда у вас есть немного волшебства, чтобы остановить одновременные запросы...

// Fired when an AJAX request begins
$.ajaxStart(function() { myApp.ajax = 1 });

// Fired when an AJAX request completes
$.ajaxComplete(function() { myApp.ajax = null });

// Fired before an AJAX request begins
$.ajaxSend(function(e, xhr, opt) {
  if(myApp.ajax != null) {
    alert("A request is currently processing. Please wait.");
    xhr.abort();
  }
});

При таком подходе вам не придется возвращаться через свой код и изменять каждый из ваших вызовов AJAX. (что-то я называю "добавлением" )

Ответ 5

Я бы использовал класс, например 'ajax-running'. Событие click будет выполняться только в том случае, если элемент с щелчком не имеет класса "ajax-running". Как только вы закончите сеанс ajax, вы можете удалить класс "ajax-running", чтобы его можно было снова щелкнуть.

$(".btnRemove").click(function(){
    var $button         = $(this);
    var is_ajaxRunning  = $button.hasClass('ajax-running');
    if( !is_ajaxRunning ){
        $.ajax({
            ...
            success: function(returned_data) {
                ...
                $button.removeClass('ajax-running');
            });
        };
    }   
});

Ответ 6

Я бы предложил отключить эту кнопку, а затем снова включить ее в ваших процедурах завершения Ajax (успех или неудача, помните). Если вы беспокоитесь о том, что браузер не соблюдает ваше отключение кнопки, вы можете вернуть это с помощью собственного флага на кнопке (например, установить атрибут с именем data-disabled, используя префикс data- в качестве хорошей практики и быть HTML5 совместимый). Но, несмотря на то, что на самом деле проблема с браузерами не отключена, я, вероятно, считаю это достаточно хорошим.

Ответ 7

Вы можете сделать действие в клике на основе логического значения. Когда он щелкнет, измените значение boolean и uset setTimeout(), чтобы изменить его обратно через несколько секунд. Это фактически ограничило бы пользователя нажатием кнопки только раз в несколько секунд.

var isEnabled = true;

$("a.clickMe").click(function(e){
  e.preventDefault();
  if (isEnabled == true) {
    isEnabled = false; // disable future clicks for now
    do_Something();
    setTimeout(function(){
      isEnabled = true;
    }, 3000); // restore functionality after 3 seconds
  }
});

Ответ 8

var ajaxAction = function() {
    var ele = $(this);
    ele.unbind("click", ajaxAction);
    ele.attr("src", "/url/to/ajax-loader.gif");
    $.ajax({
        type: "GET",
        url: "/url/to/django/view/to/remove/item/" + this.id,
        dataType: "json",
        success: function(returned_data) {
            $.each(returned_data, function(i, item) {
            });
        },
        complete: function() {
            ele.bind("click", ajaxAction);
        }
    });
}
$(".btnRemove").click(ajaxAction);

Ответ 9

Если вы отправляете сообщение через ajax, вы можете отключить кнопку при нажатии и включить ее после завершения процесса. Но если вы отправляете назад, вы не можете просто отключить кнопку. Отключение кнопки приводит к тому, что событие щелчка на стороне сервера не запускается. Поэтому просто спрячьте кнопку на клике и покажите дружеское сообщение. Сообщение как отключить кнопку asp.net при обратной передаче помогает.

Ответ 10

вы также можете просто скрыть кнопку (или содержащий div)

$(".btnRemove").click(function() {
   $(this).hide();
   // your code here...
})

и вы можете просто вызвать .show(), если вам нужно снова отобразить его.

Кроме того, в зависимости от вашего варианта использования вы должны вместо этого использовать накладку загрузки