第二次单击后触发按钮的功能

Question

I have two buttons and one input. The input takes the value of the clicked button. Both buttons have the same class, have one click (Vue) for add active class, and second click. On click take the button's value and append it in the input.

The problem with which I am stuck is that the function for taking the value works after the second triggered click.

I've tried with dblclick and to delete the click for active class - but nothing changed. Can someone give a hand with this? Thank you.

Vue project (js function imported in methods)

<div class="col-md-12 buttons-wrapper" id="direction">
  <button id="buy-button" value="1" name="Direction1" class="button btn buy" @click="selected = 1" :class="{active:selected == 1}" v-on:click.capture="buttonDirectionValue">Buy</button>
  <button id="sell-button" value="2" name="Direction2" class="button btn sell" @click="selected = 2" :class="{active:selected == 2}" v-on:click.capture="buttonDirectionValue">Sell</button>
  <input id="inputDirection" name="Direction" type="text" placeholder="" class="form-control input-md" style="display: block" readonly></input>
</div>

buttonDirectionValue() {
  event.preventDefault();
  $("#direction button").click(function() {
    $("#inputDirection").val($(this).val());
  });

Answer 1

buttonDirectionValue() {
    event.preventDefault();
    $("#direction button").trigger("click");
});
$("#direction button").click(function() {
    $("#inputDirection").val($(this).val());
});

Above should be your code. Correction is to place the .click outside of buttonDirectionValue() function.

If you place the .click inside of buttonDirectionValue() function, the .click will only be registered when the button is clicked for the first time and triggered on the second click.

While placing it outside will bind the .click on page load and trigger the click on buttonDirectionValue() function call.

Hope this helps

Answer 2

The problem obviously is that you bind the click event after the button click

you can bind the click event right after page loads like that:

    $(document).ready(function(){
        $("#direction button").click(function() {
            $("#inputDirection").val($(this).val());
        }
    });

//edit1

you can also remove the v-on:click.capture="buttonDirectionValue"

and use this code to bind click events for both buttons

    $(document).ready(function(){
        $('button.buy, button.sell').click(function() {
            $("#inputDirection").val($(this).val());
        }
    });