How to disable and enable onclick with JQuery

Question

How to disable and enable onclick with JQuery

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

Hello. I'm doing a little college job where a kid needs to click on the wrong picture in a group with 3 other pictures. When clicking on one of the images, it receives feedback if 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 happens to be visible, while the current 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 this work, but I could not get the onclick back on the next div.

I used it this way:

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

I tried to use on () later, but I could not. Now I'm using off (), but I can not even disable it. Here is 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>

javascript html jquery

asked by anonymous 30.04.2018 / 16:04

2 answers

2

You can do this by using 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><buttonid="botaoAcao">Clique aqui</button>
<button id="ligar">LigarClick</button>
<button id="desligar">Desligar Click</button>

30.04.2018 / 16:14

Word count using dictionary How to transform a sequence written in a numerical sequence? (R)

score 1 · Accepted Answer

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

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

Place this line before the return of the function:

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

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