Run double click, just with a click

0

How can I do that by clicking on the + button, I automatically re-run the same functionality but as if I had clicked on the other + button.

I need it that way since one brings different data to the other, but I want it to be automated, so that when the one on the left side clicks on it, it will also run.

    
asked by Kmiilo Berrio Montoya 26.01.2017 в 17:11
source

1 answer

2

What you should do is to trigger the event click on the other + button.

I do not know if you need to make each button react in consequence of the other. In that case you should check if the click event has been triggered by a user action or by you through the code. In the case of having been launched the code event, you would not launch the click on the other button or you would generate an infinite reaction.

$(function () {
  var $btnIncA = $('#btn-inc-a');
  var $btnIncB = $('#btn-inc-b');
  var $inputA = $('#input-a');
  var $inputB = $('#input-b');

  $btnIncA.on('click', function (e) {
    $inputA.val(parseInt($inputA.val()) + 1);

    // Verificamos si el evento fue lanzado por una acción del usuario o desde el otro botón. O se seguirían incrementando el uno al otro hasta el infinito o más allá
    if (e.originalEvent) {
      $btnIncB.trigger('click');
    }
  });

  $btnIncB.on('click', function (e) {
    $inputB.val(parseInt($inputB.val()) + 1);

    // Verificamos si el evento fue lanzado por una acción del usuario o desde el otro botón. O se seguirían incrementando el uno al otro hasta el infinito o más allá
    if (e.originalEvent) {
      $btnIncA.trigger('click');
    }
  });
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button type="button" class="btn btn-default" id="btn-inc-a">Incrementar A</button>
  <button type="button" class="btn btn-default" id="btn-inc-b">Incrementar B</button>
  <input type="text" id="input-a" value="1">
  <input type="text" id="input-b" value="1">

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

</body>
</html>

Good luck and greetings!

    
answered by 26.01.2017 в 18:16