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

Issue

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.

Solution

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.

Answered By - Jaqen H'ghar