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

Answer 3

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,

Answer 4

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...

Answer 5

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;
})