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

Question

我有两个按钮和一个输入。 输入采用单击按钮的值。 两个按钮具有相同的类别，单击一次（Vue）可添加活动的类别，然后单击第二次。 单击时，获取按钮的值并将其附加在输入中。

我遇到的问题是，在第二次触发点击后，用于获取值的函数才能正常工作。

我已经尝试过dblclick并删除活动类的单击-但没有任何更改。 有人可以帮忙吗？ 谢谢。

Vue项目（在方法中导入的js函数）

<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());
});

上面应该是您的代码。 纠正措施是将.click放置在buttonDirectionValue（）函数之外。

如果将.click放置在buttonDirectionValue（）函数的内部，则只有在第一次单击该按钮并在第二次单击时触发该.click时，才会注册.click。

将其放置在外部时，将绑定.click页面加载并触发clickDirectionValue（）函数调用。

希望这可以帮助

Answer 2

问题显然是您在按钮单击后绑定了click事件。

您可以在页面加载后立即绑定click事件，如下所示：

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

// EDIT1

您还可以删除v-on：click.capture =“ buttonDirectionValue”

并使用此代码绑定两个按钮的点击事件

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