jQuery - How can I temporarily disable the onclick event listener after the event has been fired?

Question

How can I temporarily disable the onclick event listener, (jQuery preferred), after the event has been fired?

Example:

After the user clicks on the button and fires this function below, I want to disabled the onclick listener, therefore not firing the same command to my django view.

$(".btnRemove").click(function(){    $(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){             $.each(returned_data, function(i, item){               // do stuff                             });    } }); 

Thanks a lot,

Aldo

Answer 1

There are a lot of ways to do it. For example:

$(".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");     }); }); 

or

$(".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);     }); } 

We can also use event delegation for clearer code and better performance:

$(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");     }); }); 

If we don't need to re-enable the handler after it has been executed, then we can use the .one() method. It binds handlers that are to be executed only once. See jQuery docs: http://api.jquery.com/one

Answer 2

For how long do you want to disable the click event listener? One way is to unbind the event listener using jQuery's unbind http://docs.jquery.com/Events/unbind.

But it's best-practice not to unbind an event only to rebind it later. Use a boolean instead.

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: to be safe you should also care about the other ajax completion routines (there are only three: success, error, complete see docs) or else active might stay false.