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:

Answer 1

jQuery listeners only work on actual browser events and those aren't thrown when you change something programmatically.

You could create your own miniature jQuery extension to proxy this so that you always trigger the event but only have to do in one modular place, like so:

$.fn.changeTextField = function (value) {
  return $(this).val(value).trigger("change");
}

Then, just call your new function whenever you want to update your text field, instead of using jQuery's 'val' function:

$("#myInput").changeTextField("foo");

Here's a version working with a proxy function:

    
    
        
            
            
        
        

  
        Change value

        
        
    

For reference, this question has really already been answered here: Why does the jquery change event not trigger when I set the value of a select using val()?

and here: JQuery detecting Programatic change event