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

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页面加载并触发buttonDirectionValue()函数调用。

希望对你有帮助

Answer 2

问题显然是你在按钮点击后绑定点击事件

您可以在页面加载后立即绑定点击事件：

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

//编辑1

您也可以删除 v-on:click.capture="buttonDirectionValue"

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

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