Event click Jquery

Asked

Viewed 1,534 times

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 will call in the same HTML. For example:

$('foto)'.click(function(){
     if($('#id').clicked){
          function1();
     }
     if($('#id2').clicked){  
          function2();
     }
}
javascript jquery

  • I don’t understand why you need the if and else? if the guy doesn’t click automatically would be the else and if the person click would be the if, could explain better?

  • Hello, what is the intention of the second click? Can not do all the necessary functions after clicking in one place?

  • I’ll edit the question to explain it better.

2 answers

1

The way the question was asked makes it hard to deduce if you want:

  • The same but know if which button was clicked;
  • The same Handler but knowing the state of the buttons.

If this is the first case you can use parameter data of the method jQuery.on(). This way you can pass personalized 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>

<button id="btn-1">Botão 1</button>
<button id="btn-2">Botão 2</button>

If you want to know the status of the buttons you can use the method jQuery.data() to assign and retrieve data from a jQuery object. 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>

<button id="btn-1">Botão 1</button>
<button id="btn-2">Botão 2</button>

I used the method jQuery.add() not to need to perform another DOM search and for curiosity purposes, but you could have used a class selector like $('.meus-botoes') that would also work.

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>
  <div id="primeiro">Primeiro</div>
  <div id="segundo">Segundo</div>
  <button id="foto">Clique Aqui</button>
</body>
</html>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.