Question

考虑以下代码段

<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

插件需要一些时间来更新值。尝试使用build in callback，ref：http://api.jqueryui.com/spinner/#event-spin

作为单独的事件。

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

或作为init的选项

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

Answer 2

使用＆＃39; 停止＆＃39;事件而不是＆＃39; 旋转＆＃39;事件

对我而言，这是有效的，同时使用＆＃39;旋转＆＃39;事件给了我与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

jQuery UI微调器onchange返回旧值

2 个答案: