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>

Kruspe · Accepted Answer · 2020-02-14 18:15:26Z

2

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

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

answered Feb 14, 2020 at 18:15

Kruspe

6557 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Udochukwu Enwerem · Accepted Answer · 2020-02-14 18:37:48Z

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>

Collectives™ on Stack Overflow

How to detect dynamically changed input

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related