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>

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

Milind Anantwar · Accepted Answer · 2016-11-11 13:53:38Z

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, 2016 at 13:53

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kevin Kloet Over a year ago

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

Milind Anantwar Over a year ago

@KevinKloet: glad it helps :)

Joan Gil Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related