How to disable and enable onclick with Jquery

Question

Hello. I’m doing a little job for college, where a child needs to click on the image that is wrong in a group with 3 other images. When clicking on one of the images, it receives a feedback whether that is the right message or not, a button appears to display the result and a button to go to a next group of images, which is nothing more than a hidden div that becomes visible, while the current one becomes invisible.

I need to stop the onclick of the images, so that I can only click one at a time. I managed to make it work, but I couldn’t get the onclick back in the next div.

I used it that way:

$("img").prop('onclick', null).off('click');

I tried to use on() later, but I couldn’t. Now I’m using off(), but I can’t even disable it. Follow the code:

    function imagemCerta(imagem){
    var nome = $(imagem).attr('name');
    switch($(imagem).closest("div").attr('id')){ 
        case "comidas":
            if( nome == "brocolis") {
                total = total + 1;
                console.log("Total", total);
            }
            $("img").off('click');
            $("button[name='resultado']").show();
            $("button[name='resultado']").click(function(){
                $("img[name='hamburguer']").attr("src", "./imagens/hamburguer.png");
                $("img[name='brocolis']").attr("src", "./imagens/check.png");
                $("img[name='pizza']").attr("src", "./imagens/pizza.png");
                $("img[name='hotdog']").attr("src", "./imagens/hotdog.png");
                $("button[name='proximo']").show();
                $("button[name='resultado']").hide();
                $("button[name='proximo']").click(function(){
                    $("div[id='comidas']").hide();
                    $("div[id='animais']").show();
                    $("img").on(imagemCerta);
                });
            });
            break;

        case "animais":
            if(nome == "sanduba"){ 
                total = total + 1;
            }
            $("img").off('click');
            $("button[name='resultado2']").show();
            $("button[name='resultado2']").click(function(){
                $("img[name='cachorro']").attr("src", "./imagens/cachorro.png");
                $("img[name='sanduba']").attr("src", "./imagens/check.png");
                $("img[name='leao']").attr("src", "./imagens/leao.png");
                $("img[name='burro']").attr("src", "./imagens/burro.png");
                $("button[name='proximo2']").show();
                $("button[name='resultado2']").hide();
                $("button[name='proximo2']").click(function(){
                    $("div[id='animais']").hide();
                    $("div[id='transportes']").show();
                    $("img").on(imagemCerta);
                });
            });
            break;


        case "transportes":
            if(nome == "robo"){ 
                total = total + 1;
            }
            $("img").off('click');
            $("button[name='resultado3']").show();
            $("button[name='resultado3']").click(function(){
                $("img[name='trem']").attr("src", "./imagens/trem.png");
                $("img[name='robo']").attr("src", "./imagens/check.png");
                $("img[name='caminhao']").attr("src", "./imagens/caminhao.png");
                $("img[name='aviao']").attr("src", "./imagens/aviao.png");
                $("button[name='proximo3']").show();
                $("button[name='resultado3']").hide();
                $("button[name='proximo3']").click(function(){
                    $("div[id='transportes']").hide();
                    $("div[id='final']").show();
                    $("img").on(imagemcerta);
                });
            });
            break;
    }
    return;
}

my html file:

<div id="comidas"> 
    <center>
    <img name="hamburguer" src="./imagens/hamburguer.png" onclick="this.src='./imagens/close.png'; imagemCerta(this)">
    <img name="pizza" src="./imagens/pizza.png" onclick="this.src='./imagens/close.png'; imagemCerta(this)">
    <img name="brocolis" src="./imagens/brocolis.png" onclick="this.src='./imagens/check.png'; imagemCerta(this)">
    <img name="hotdog" src="./imagens/hotdog.png" onclick="this.src='./imagens/close.png'; imagemCerta(this)">
    <br>
    <button name="resultado" style="display: none" class="btn btn-danger">Resultado</button>
    <button name="proximo" style="display: none" class="btn btn-primary">Proximo >>> </button>
    </center>
</div>

Answer 1

You can do so by using the off:

   // Começa com o click associado
$('#botaoAcao').click(clickBotao);

$('#ligar').click(function() {
    $('#botaoAcao').click(clickBotao);
    $('#botaoAcao').text('Clique aqui');
});

$('#desligar').click(function() {
    $('#botaoAcao').off('click');
    $('#botaoAcao').text('Sem click :(');
});


function clickBotao() {
   console.log('Ação de clicar...\n');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="botaoAcao">Clique aqui</button>
<button id="ligar">LigarClick</button>
<button id="desligar">Desligar Click</button>

Answer 2

Empty the onclick only of the images of div current with:

$("img", $(imagem).closest("div")).attr('onclick', null);

Put this line before the return of function:

function imagemCerta(imagem){
  ...
  $("img", $(imagem).closest("div")).attr('onclick', null);
  return;
}

At the event $("button[name='proximo']").click(function(){, replace the line $("img").on('click', imagemCerta()); for $("img").on('click'); to restore the event by clicking on the images.