jQuery UI spinner onchage return old value

Question

Considering the following snippet

<input type="text" id="age" value="" maxlength="2" style="width: 30px;" />
<script type="text/javascript">
    $("#age").spinner({
        min: 1,
        max: 99,
        spin: function(event, ui) {
            $(this).change();
        }
    }).val(35);
    $("#age").change(function() {
        console.log($("#age").val());
    });
</script>

Why when onchange event occurs by pressing Up/Down key or clicking the spinner it log the old spinner value?

JS Fiddle

Answer 1

The plugin takes some time to update the value. Try using the build in callback, ref: http://api.jqueryui.com/spinner/#event-spin

as a seperate event.

$("#age").on( "spin", function( event, ui ) { 
    console.log(ui.value)
});

or as a option on init

$("#age").spinner({
    min: 1,
    max: 99,
    spin: function( event, ui ) {
        console.log(ui.value)
    }
});

Answer 2

Use the 'stop' event instead of the 'spin' event.

For me, this worked, while using the 'spin' event gave me the same problem as the PO.

Quoting from the jQueryUI-API: (emphasis by me)

stop( event, ui ) Type: spinstop Triggered after a spin.

$( ".selector" ).spinner({
  stop: function( event, ui ) {}
});

Bind an event listener to the spinstop event:

$( ".selector" ).on( "spinstop", function( event, ui ) {} );

Source: http://api.jqueryui.com/spinner/#event-stop