javascript - 为什么引导输入微调器的更改事件不起作用？

Question

我编写了一个调用文本输入的更改事件的方法。

当我点击+和-按钮时更改事件不会调用，但是当我手动更改输入值时更改事件 已调用。

问题是什么？

js

 $("#wraper-frequency input[type=text]").change(function (e) {
    alert("frequency change");
});

html

<div id="wraper-frequency">
<input id="frequency" class="form-control" type="number" value="0" min="0" max="50" step="1" style="display: none;">
<div class="input-group  ">
    <div class="input-group-prepend">
        <button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
    </div>
    <input type="text" style="text-align: center" class="form-control " placeholder="">
    <div class="input-group-append">
        <button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
    </div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Hz</label>

Answer 1

您没有将事件绑定(bind)到任何按钮。您可以在单击按钮时触发输入元素的 change 事件，如下所示:

$("#wraper-frequency input[type=text]").change(function (e) {
  alert("frequency change");
});
$("button").click(function(){
  $("#wraper-frequency input[type=text]").trigger('change')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wraper-frequency">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0" max="50" step="0.1" style="display: none;">
<div class="input-group  ">
    <div class="input-group-prepend">
        <button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
    </div>
    <input type="text" style="text-align: center" class="form-control " placeholder="">
    <div class="input-group-append">
        <button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
    </div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>