.val() doesn't trigger .change() in jquery

Question

Hello, I am trying to trigger .change() on a text box when I change it's value simply with a button but it doesn't work. Check link below. If you type something in textbox then click somewhere else .change() triggers but if you click only button, it changes textbox value but .change() doesn't trigger.

:( why?

http://jsbin.com/otove/edit

Answer 1

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

Answer 2

No you might need to trigger it manually after setting the value:

$('#mytext').change();

or:

$('#mytext').trigger('change');

Answer 3

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.