Why dont work change event of bootstrap input spinner?

Question

I write a method that called in change event of text input.

When i click on + and - buttons change event dont called but when i change value of input manually change event called.

What is problem?

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>

Please update the question with relevant HTML....Creating a working fiddle is even better... — Mamun, Aug 17 '19 at 07:00
Are you sure you have exactly one text input with id `wrapper-frequency'` as you are using Id selector? In that case, why don't you just use the Id? — fiveelements, Aug 17 '19 at 07:02
Where is `wrapper-frequency` field? Neither I see a text input field in HTML. — fiveelements, Aug 17 '19 at 07:03
Use [`trigger('change')`](https://stackoverflow.com/questions/4247264/how-to-trigger-jquery-change-event-in-code) — User863, Aug 17 '19 at 07:11

score 2 · Accepted Answer · answered Aug 17 '19 at 07:13

You didn't bind the event to any of the buttons. You can trigger the change event of the input element on button click like the following way:

$("#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>

fiveelements · Answer 2 · 2019-08-17T07:17:26.173

As I mentioned in the comments to the original post:

You do not have an input[type=text] field with Id wrapper-frequency.
Also in the text field type, there were spaces. Remove spaces.
If you want the event to be triggered on button click as well, trigger the event manually.
Lastly, a selector combining Id and input[type=text] is not doing any good. Id is anyway unique. If you mean wrapper-frequency and input[ type=text] both selection use comma in between.

Here is the modified code that works:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#wrapper-frequency, input[type=text]").change(function (e) {
            alert("frequency change");
        });
    });
</script>
<div id="wraper-output-pressure">
    <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>

score 0 · Answer 3 · edited Aug 17 '19 at 07:20

0

You are trying to attach an event listener to an element that doesn't exist in your example.

In your example you are targeting #wraper-frequency. I only see the id's #wraper-output-pressure and #output-pressure in your HTML.

edited Aug 17 '19 at 07:20

Bhargav Rao

50,140
28
121
140

answered Aug 17 '19 at 07:07

Why dont work change event of bootstrap input spinner?

3 Answers3