val doesn t trigger change in jQuery

Question

I m trying to trigger the change event on a text box when I change its value with a button  but it doesn t work  Check this fiddle   If you type something in the text boxes and click somewhere else  change is triggered  However  if you click the button  the text box value is changed  but change doesn t trigger  Why

User · Answer

As of feb 2019  addEventListener   is not currently work with jQuery  trigger   or  change    you can test it below using Chrome or Firefox    x000D   x000D  txt addEventListener  input   function     x000D    console log  not called     x000D     x000D      txt   val  test   trigger  input    x000D      txt   trigger  input    x000D      txt   change    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  id  txt  gt  x000D   x000D   x000D    you have to use  dispatchEvent   instead    x000D   x000D  txt addEventListener  input   function     x000D    console log  it works     x000D     x000D      txt   val  yes   x000D  txt dispatchEvent new Event  input     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  text  id  txt  gt  x000D   x000D   x000D

User · Answer

You need to chain the method like this       input   val  test   change

User · Answer

No you might need to trigger it manually after setting the value       mytext   change      or       mytext   trigger  change

User · Answer

onchange only fires when the user types into the input and then the input loses focus   You can manually call the onchange event using after setting the value       mytext   change       someObject onchange    in standard JS   Alternatively  you can trigger the event using       mytext   trigger  change

User · Answer

From redsquare s excellent suggestion  this works nicely     fn changeVal   function  v        return this val v  trigger  change           my-input   changeVal  Tyrannosaurus Rex

User · Answer

From https   api jquery com change    The change event is sent to an element when its value changes  This event is limited to  lt input gt  elements   lt textarea gt  boxes and  lt select gt  elements  For select boxes  checkboxes  and radio buttons  the event is fired immediately when the user makes a selection with the mouse  but for the other element types the event is deferred until the element loses focus

User · Answer

I know this is an old thread  but for others looking  the above solutions are maybe not as good as the following  instead of checking change events  check the input events       myInput   on  input   function            Print entered value in a div box         result   text   this  val

User · Answer

You can very easily override the val function to trigger change by replacing it with a proxy to the original val function   just add This code somewhere in your document  after loading jQuery    function         var originalVal     fn val        fn val   function            var result  originalVal apply this arguments           if arguments length gt 0                this  change       OR with custom event   this  trigger  value-changed            return result            jQuery     A working example  here   Note that this will always trigger change when val new val  is called even if the value didn t actually changed    If you want to trigger change ONLY when the value actually changed  use this one     This will trigger  change  event when  val new val   called    with value different than the current one  function         var originalVal     fn val        fn val   function            var prev          if arguments length gt 0               prev   originalVal apply this                        var result  originalVal apply this arguments           if arguments length gt 0  amp  amp  prev  originalVal apply this                    this  change        OR with custom event   this  trigger  value-changed           return result            jQuery     Live example for that  http   jsfiddle net 5fSmx 1

User · Answer

It looks like the events are not bubbling  Try this       mybutton   click function      var oldval     mytext   val          mytext   val  Changed by button      var newval     mytext   val      if  newval    oldval            mytext   trigger  change              I hope this helps    I tried just a plain old     mytext   trigger  change   without saving the old value  and the  change fires even if the value didn t change  That is why I saved the previous value and called     mytext   trigger  change   only if it changes

[jquery] val() doesn't trigger change() in jQuery

Examples related to jquery

Examples related to triggers