val() doesn't trigger change() in jQuery
JqueryTriggersJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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").val( 777 ).change(); // someObject.onchange(); in standard JS
Alternatively, you can trigger the event using:
$("#mytext").val( 777 ).trigger("change");
Solution 2 - Jquery
From redsquare's excellent suggestion, this works nicely:
$.fn.changeVal = function (v) {
return this.val(v).trigger("change");
}
$("#my-input").changeVal("Tyrannosaurus Rex");
Solution 3 - Jquery
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>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>0){
prev = originalVal.apply(this,[]);
}
var result =originalVal.apply(this,arguments);
if(arguments.length>0 && 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/
Solution 4 - Jquery
You need to chain the method like this:
$('#input').val('test').change();
Solution 5 - Jquery
No you might need to trigger it manually after setting the value:
$('#mytext').change();
or:
$('#mytext').trigger('change');
Solution 6 - Jquery
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.
Solution 7 - Jquery
As of feb 2019 .addEventListener()
is not currently work with jQuery .trigger()
or .change()
, you can test it below using Chrome or Firefox.
txt.addEventListener('input', function() {
console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">
you have to use .dispatchEvent()
instead.
txt.addEventListener('input', function() {
console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">
Solution 8 - Jquery
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());
});
Solution 9 - Jquery
From https://api.jquery.com/change/:
The change
event is sent to an element when its value changes. This event is limited to <input>
elements, <textarea>
boxes and <select>
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.