How to detect dynamically changed input

Question

I am working on the below snippet. Why am I not able to detect the input change using this?

$("#fname").on("change", function () {
   console.log("The text has been changed.");
});

$("button").on("click", function () {
    $("#fname").text('Alex');
    $("#fname").val('Alex');
});

$("#fname").on("change", function () {
   console.log("The text has been changed.");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <input type="text" id="fname" name="fname"><br><br>
<button type="button">Click Me!</button>

score 2 · Accepted Answer · answered Feb 14 '20 at 18:15

2

This only gets triggered if the user sets the value. You can trigger it manually.

$("#fname").val('Alex').change();

answered Feb 14 '20 at 18:15

Kruspe

626
6
19

score 1 · Answer 2 · answered Feb 14 '20 at 18:37

You have to trigger change programmatically if you are applying the change programmatically.

$("button").on("click", function () {
    $("#fname").text('Alex').trigger('change');
    $("#fname").val('Alex').trigger('change');
});

$("#fname").on("change", function () {
   console.log("The text has been changed.");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <input type="text" id="fname" name="fname"><br><br>
<button type="button">Click Me!</button>

How to detect dynamically changed input

2 Answers2