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

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>

You will have to manually fire necessary function after its updated from JS — Rajesh, Nov 11 '16 at 13:53
@AniketSahrawat He means if I do `$("#firstId").val('test')` no event is fired — Rajesh, Nov 11 '16 at 13:53

score 12 · Accepted Answer · answered Nov 11 '16 at 13:53

12

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

answered Nov 11 '16 at 13:53

Milind Anantwar

81,290
25
94
125

exactly what i was looking for, thanks for reminding me about the fact that event have to be triggered by user input – Kevin Kloet Nov 11 '16 at 13:58
@KevinKloet: glad it helps :) – Milind Anantwar Nov 11 '16 at 14:06
1

Thanks, really helped! For anyone using the better approach for input listening `.on("input")`, remember to do `.trigger("input")` instead :) – Joan Gil Mar 15 '18 at 14:16

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

1 Answers1