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

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?

> 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' />

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' />

What you need to do is trigger the change event after you've set the text. So you may create a function to do that so you won't have to repeat it every time you need to update the text, like this:

function changeTextProgrammatically(value) {
    $("input").val( value );
    $("input").trigger( 'change' ); // Triggers the change event
}

changeTextProgrammatically( "A" );

I've updated the fiddle,

You can use the DOMSubtreeModified event:

$('input').bind('DOMSubtreeModified',function(){...})

If you want to fire both user and code changes:

$('input').bind('input DOMSubtreeModified',function(){...})

This event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...

jquery change event only works when the user types into the input and then loses focus. So you can use the following workaround to do so:- Let's say you have a button clicking on which results in change in value of input. (this could be anything else as well instead of a button)

var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
   //do something
  }
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})