Jquery click event

0

I'm trying to use jQuery to do something like:

if($('#id').click) {
    //Eu sei que quando este elemento 
    //for clicado ele vai fazer algo aqui, mas, eu queria em um 
    //outro momento fora da função saber se foi clicado ou não
}

if($('#id2').click) {

    }

EX:

    if($('#id').***clicked*** {

}

I need to test which of the two was clicked because I'll call in the same HTML. For example:

$('foto)'.click(function(){
     if($('#id').clicked){
          function1();
     }
     if($('#id2').clicked){  
          function2();
     }
}
    
asked by anonymous 24.10.2018 / 22:04

2 answers

1

The way the question was asked is difficult to deduce if you want to:

  • The same handler but knows which button was clicked;
  • The same handler but the status of the buttons is known.

If this is the first case you can use data parameter of the jQuery.on() method. This way you can pass custom data to the event handler.

Ex:

let $botao_1 = $('#btn-1');
let $botao_2 = $('#btn-2');

function click_handler(event) {
  console.log(event.data.texto);
}

$botao_1.on('click', { texto: "Você clicou no botão 1" }, click_handler);
$botao_2.on('click', { texto: "Você clicou no botão 2" }, click_handler);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="btn-1">Botão 1</button>
<button id="btn-2">Botão 2</button>

If you want to know button states you can use the jQuery.data() method to assign and retrieve data for an object jQuery. Ex.:

let $botao_1 = $('#btn-1');
let $botao_2 = $('#btn-2');
let $botoes = $botao_1.add($botao_2);  // apenas cria um "grupo" com os dois botões

function click_handler(event) {
  // converte um HTMLElement para um objeto jQuery
  let $this = $(this);
  
  // Recupera a quantidade de clicks, senão houver recebe zero
  let clicks = $this.data('clicks') || 0;
  
  // Incrementa 'clicks' no botão clicado
  $this.data('clicks', clicks + 1);

  // Apenas para visualização dos dados
  console.log('Clicks no botão 1: ' + $botao_1.data('clicks'));
  console.log('Clicks no botão 2: ' + $botao_2.data('clicks'));
  console.log('-----');
}

$botoes.on('click', click_handler);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonid="btn-1">Botão 1</button>
<button id="btn-2">Botão 2</button>

I used the jQuery.add() method to avoid having to run another search in the DOM and for curiosity purposes, but you could have I used a class selector like $('.meus-botoes') which would also work.

    
24.10.2018 / 23:14
0

A global variable would solve your problem:

$(document).ready(function() {
  if ($('#primeiro').click(function() {
      teste = 1;
    }));

  if ($('#segundo').click(function() {
      teste = 2;
    }));

  $('#foto').click(function() {
    alert(" O " + teste + " foi clicado");
    if (teste = 1) {
      /*function1()*/
    } else if (teste = 2) {
      /*function2()*/
    }
  });
});
<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><divid="primeiro">Primeiro</div>
  <div id="segundo">Segundo</div>
  <button id="foto">Clique Aqui</button>
</body>
</html>
    
24.10.2018 / 22:44