jquery-ui - 达到一定值后如何正确销毁微调器

Question

在我的应用程序中，一旦用户在微调器中输入了某个值，我应该更改视图的内容。作为此过程的一部分，我需要销毁并移除微调器。

问题是微调器进入循环并将其值增加到无止境。示例代码：

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) { 
            console.log( 'spin event, value = ', ui.value );
        if ( ui.value == 3 ) {
            spinner.spinner( "destroy" );
        }
    }
});

请检查以下示例：http: //jsfiddle.net/XseWc/312/

将值增加 3 次：单击、单击、单击

如何做到这一点？

更新：这里有两个选项。

1. 使用停止事件而不是自旋。
2. 在销毁微调器之前触发鼠标向上事件。随着鼠标向上微调将删除它的处理程序和销毁将正常工作。

Answer 1

只是防止默认事件！

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) {  
        if ( ui.value == 3 ) {
            //NEW
            event.preventDefault();
            spinner.spinner( "destroy" );
       }
    }
});

老小提琴

请参阅此文档条目。它可以防止微调器执行正常（默认）行为。

编辑

也许这可以被视为一种解决方法，但该解决方案有效并且不会引发大量错误。

$(function () {
    var value;
    spinner = $("#spinner").spinner({
        change: function (event, ui) {
            console.log('change');
        },
        spin: function (event, ui) {
            value = ui.value;
        },
        stop: function (event, ui) {
            if (value == 3) {
                $(this).spinner("destroy");

            }
        }
    });
});

更新的小提琴

Answer 2

试试这个（hide() 和 remove() 都对我有用）

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) {  
        if ( ui.value == 3 ) {
            spinner.hide();
        }
    }
});

Answer 3

这会完成你正在寻找的东西吗？

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) {  
        if ( ui.value == 3 ) {
            spinner.remove();
        }
    }
});