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

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

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.

why not disable the button ?Any specific reason that you want to disable this listner alone ?BTB, from your code, I see that you are making an ajax call. SO you specifically want to block user until the call comes back ? If yes, you can try blockUI, a jQuery plugin