CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6328

How to detect dynamically changed input

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>

Upvotes: 2

Views: 262

Answers (2)

Udochukwu Enwerem
Udochukwu Enwerem

Reputation: 2823

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>

Upvotes: 1

Kruspe
Kruspe

Reputation: 645

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

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

Upvotes: 2

Related Questions