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

Question

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>

Decennary

I am sorry, what is not working? – Asoka

You will have to manually fire necessary function after its updated from JS – Razorbill

@AniketSahrawat He means if I do $("#firstId").val('test') no event is fired – Razorbill

Answer 1

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

Sidman

exactly what i was looking for, thanks for reminding me about the fact that event have to be triggered by user input – Decennary

@KevinKloet: glad it helps :) – Sidman

Thanks, really helped! For anyone using the better approach for input listening .on("input"), remember to do .trigger("input") instead :) – Hornswoggle