on() and bind() are not working

Question

I’m using off() in an element to disable its functionality and need to enable it again with on(). But it’s not working when on() is executed...

Here’s the code, I’m trying to prevent a form from being sent twice when it’s clicked on a button:

$("#meuBotao").click(function (e) {
    $(this).off("click");
    $.ajax({
    url: "/page",
    type: "POST",
    complete: function() {
                    $(this).on("click");
    },
                ...

What am I doing wrong? I tried with on() and off(), and with bind() and unbind() also (who are deprecated for older versions now, but it should still work).

Answer 1

As I understand it, you want to disable the button while AJAX is running so the user can’t fire multiple requests, correct? In this case it could be done so:

 $("#meuBotao").on('click',function(){
    var el = $(this);
    el.prop('disabled',true); //desabilita o botão
    $.ajax({
    url: "/page",
    type: "POST",
    complete: function(){
        el.prop('disabled',false); //habilita botão novamente
    },
    //...

Note that I have created a new variable el to handle the element $(this), so that it works properly even within other scopes (as in the case of the function fired in the complete ajax).

I also switched .click() for .on('click') because this second is more recommended by several reasons.

Answer 2

The main problem here is that the this inside the ajax function is not the same as the this out of the function. The scope is different... This has easy solution, which is to create an intermediate variable that points to the same object:

$("#meuBotao").click(function (e) {
    $(this).off("click");
    var self = this; // assim guardamos o apontador no "self"
    $.ajax({
        url: "/page",
        type: "POST",
        complete: function() {
            $(self).on("click"); // aqui usa o "self". Já agora, aqui falta a função a correr quando o click fôr gerado
        },
            ...

Apart from this detail there are other more commonly used ways to prevent clicks, rather than removing and adding events. One of them is to create a flag/flag as property in the element or a variable that stores the information of whether the element can be clicked or not.

An example of this would be:

$("#meuBotao").click(function (e) {
    if (!$(this).data('clicavel')) return false;
    $(this).data('clicavel', false);
    var self = this; // assim guardamos o apontador no "self"
    $.ajax({
    url: "/page",
    type: "POST",
    complete: function() {
          $(self).data('clicavel', true);
    },
                ...

You can even do the same by adding CSS pointer-events: none; in a class, or directly in the element. You can see more ideas in this answer: /a/2353/129

Note: in your code $(this).on("click"); the second parameter of the function indicating which code to run when the click is received is missing...