jquery.ui.spinner 更改

Question

我正在尝试使用最新版本的 jquery.ui.spinner.js 。 http://wiki.jqueryui.com/w/page/12138077/Spinner

旋转器正在显示并更新文本框，但我无法弄清楚如何捕获“更改”事件。当您手动更改文本框中的值时会触发它，但当您使用微调器箭头时不会触发。

jquery:

    $('input[name*="opening"]').spinner({ min: 0, max: 100});

    $('#doorsize6w7h-f').spinner().change(function(){
         alert($(this).spinner('value'));
    });

html:

<input type="text" value="0" class="front" id="doorsize6w7h-f" name="opening[0][0]" />

Answer 1

在微调器控件上附加一个事件，该事件在文本框上调用 change()。

$('.ui-spinner-button').click(function() {
   $(this).siblings('input').change();
});

jsFiddle。

设置好旋转器后。

Answer 2

我认为这就是您所需要的：

$('.mySpinner').spinner({          
    stop:function(e,ui){
        alert('Triggered after a spin.');
    }
});

与绑定到按钮的 click 事件不同，这还将检测键盘上向上/向下键的使用。

请参阅此页面了解详细信息和更多活动：
http://api.jqueryui.com/spinner/#entry-examples

Answer 3

没有“change”事件，而是使用“spinstop”事件：

$('#doorsize6w7h-f').on("spinstop", function(){
   alert($(this).spinner('value'));
});

文档还建议使用 spinchange 事件，但对我来说有点滞后。

资源： http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner %2Fspinner%26redirect%3Dno#event-change

Answer 4

好吧，实际上我会通过标准“更改”事件路由更改并捕获所有内容，如下所示：

$('input[name*="opening"]').spinner({
    min: 0,
    max: 100,
    spin: function(event, ui) {
        $(this).change();
    }
});

Answer 5

这给了我最流畅的结果：

function betterSpinner(input)
{
    input.spinner(
    {
        spin: function(event, ui)
        {
            // the spin event is raised before the value actually gets changed,
            // so let's update it here before raising the input's change() event.
            input.val(ui.value);
            input.change();
        }
    });
}

$(document).ready(function ()
{
    betterSpinner($("#myInput"));
});

Answer 6

我知道这个问题已经有了答案。但我希望这对其他人有帮助。

除了手动编辑值和使用微调器的箭头按钮外，还可以使用键盘上的箭头按钮编辑微调器的值。在这种情况下，我发现 keyup 事件比 Change 事件更强大：

$(document).ready(function(){
    var range_spinner = $('.spinner').spinner(); 

    // hack to trigger input keyup whenever spinner button clicked:
    $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); });   

    // keyup will catch any stroke on keyboard
    $('#range').keyup(function(){
       console.log(range_spinner.spinner('value')); 
    });
});