Kevin Kloet Kevin Kloet - 29 days ago 5
Javascript Question

jQuery on change/input not working when updating value via JS

i have noticed that the event for

$('#firstId')
is not firing when the change is done by the javascript itself.

why is this the case?

is there a way to still fire the event?

here is an example:



$('#firstId').on('change input paste', function(){
console.log("this is the input event being fired");
});

$('#randomButton').on('click', function(){
$('#firstId').val(Math.floor(Math.random()*2147483647 )+1);
console.log("randomButton being fired");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span for="firstId">number: </span>
<input type="number" id="firstId"/>
<p>Or</p>
<button id="randomButton">Get a random number</button><br>




Answer

That is because all the events attached above via handler are triggered by user action and not via code. you can use .trigger() or .change() here to trigger the event:

$('#firstId').val(Math.floor(Math.random()*2147483647 )+1).change();

or

$('#firstId').val(Math.floor(Math.random()*2147483647 )+1).trigger('change');