jQuery UI Spinner 变化事件

Question

我正在尝试使用最新版本的jquery.ui.spinner.js。旋转器正在显示并更新文本框，但我无法弄清如何捕获“change”事件。当您手动更改文本框中的值时，它会触发，但当您使用旋转器箭头时则不会触发。请参考http://wiki.jqueryui.com/w/page/12138077/Spinner。

    $('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]" />

- etriad

Answer 1

在下拉框控件上附加一个事件，该事件调用您的文本框上的change()函数。

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

在设置旋转器之后。

jsFiddle.

- alex

---

+1，我非常确定你的想法是正确的，只需在微调器的更改处理程序中触发输入的“change”事件即可。 - Matt Ball

我对 jq 还比较陌生，有点困惑。你能给一个例子吗？ - etriad

@alex 我对 jsfiddle 也不是特别熟悉，但希望这个链接能够使用：链接。 - etriad

这只有在你松开鼠标时才会触发更改事件，这是有效的，但对于我的使用情况来说会产生不稳定的结果。 - mm201

显然，当用户使用鼠标滚轮时，这将无法正常工作。 - Kevin M

Answer 2

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

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

与绑定按钮的 click 事件不同，这也会检测键盘上的上/下键的使用。

有关详细信息和更多事件，请参见此页面： http://api.jqueryui.com/spinner/#entry-examples

- Pablo S G Pacheco

---

stop事件的问题在于，根据文档，即使ui对象是可用的，它也是空的，因此您无法立即在旋转后获取微调器的值。这就是为什么我更喜欢使用spin事件的原因。 - Pere

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

- Arman Bimatov

---

这是我使用的最佳方法，它可以处理鼠标点击和键盘事件。 - Shahzad Qureshi

Answer 4

实际上，我会通过标准的“change”事件来路由更改并捕获所有内容，就像这样：

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

- George Mavritsakis

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

- mm201

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

- goFrendiAsgard