Input event not working if value is changed with jQuery val() or JavaScript

Question

If I change the value of an input field programmatically, the input and change events are not firing. For example, I have this scenario:

var $input = $('#myinput');    $input.on('input', function() {    // Do this when value changes    alert($input.val());  });    $('#change').click(function() {    // Change the value    $input.val($input.val() + 'x');  });

<input id="myinput" type="text" />  <button id="change">Change value</button>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

The problem: The event is triggered when I type in the textfield, but not when I press the button. Is there a way to achieve this with some kind of event or otherwise without having to do it manually?

What I don't want to do: I could go through all my code to add a trigger or function call everywhere manually, but that's not what I'm looking for.

Why: The main reason I would like to do this automatically is that I have a lot of input fields and a lot of different places where I change these inputs programmatically. It would save me a lot of time if there was a way to fire the event automatically when any input is changed anywhere in my code.

Answer 1

Simple solution:

Trigger input after you call val():

$input.trigger("input"); 

var $input = $("#myinput");    $input.on('input', function() {    alert($(this).val());  });    $('#change').click(function() {    // Change the value and trigger input    $input.val($input.val() + 'x').trigger("input");  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <input id="myinput" type="text" />  <button id="change">Change value</button>

Specific solution:

As mentioned you don't want to trigger input manually. This solution triggers the event automatically by overriding val().

Just add this to your code:

(function ($) {     var originalVal = $.fn.val;     $.fn.val = function (value) {         var res = originalVal.apply(this, arguments);          if (this.is('input:text') && arguments.length >= 1) {             // this is input type=text setter             this.trigger("input");         }          return res;     }; })(jQuery); 

See JSFiddle Demo

PS

Notice this.is('input:text') in the condition. If you want to trigger the event for more types, add them to the condition.