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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

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

jQuery UI spinner onchage return old value

Sign up