jQuery UI spinner onchange 返回旧值

Question

考虑以下sn-p

<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>

为什么当onchange 事件发生时，按向上/向下键或单击微调器会记录旧微调器值？

JS Fiddle

Answer 1

插件需要一些时间来更新值。 尝试使用内置回调，参考：http://api.jqueryui.com/spinner/#event-spin

作为一个单独的事件。

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

或作为初始化选项

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

Answer 2

使用 'stop' 事件而不是 'spin' 事件。

对我来说，这很有效，而使用“旋转”事件给我带来了与 PO 相同的问题。

引用 jQueryUI-API：（我强调）

stop( event, ui ) 类型：spinstop 在旋转之后触发。

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

将事件监听器绑定到 spinstop 事件：

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

来源：http://api.jqueryui.com/spinner/#event-stop