How to fire JQuery change event when input value changed programmatically?

Question

I want to fire the JQuery change event when the input text is changed programmatically, for example like this:

$("input").change(function(){      console.log("Input text changed!");  });  $("input").val("A");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type='text' />

But it doesn't work. How can I make this work?

Answer 1

change event only fires when the user types into the input and then loses focus.

You need to trigger the event manually using change() or trigger('change')

$("input").change(function() {    console.log("Input text changed!");  });  $("input").val("A").change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <input type='text' />

Answer 2

The event handler .change() behaves like a form submission - basically when the value changes on submit the console will log. In order to behave on text input you would want to use input, like below:

$("input").on('input', function(){      console.log("Input text changed!");  });  $("input").val("A");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type='text' />