Jquery ui 纺纱机达到一定值后如何正确销毁

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

问题是，微调器进入循环并不断增加其“值”。 示例代码：

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

请检查以下样本：

增加值3次：单击，单击，单击

如何做到这一点

更新： 这里有两个选项

使用停止事件而不是旋转

在销毁微调器之前触发鼠标上升事件。随着鼠标向上旋转器将删除它的处理程序和销毁将正常工作

试试这个（hide（）和remove（）对我都有效）

---

这能完成你想要的吗

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

---

只需防止默认事件

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

            }
        }
    });
});

---

将

控制台.log

添加到旋转事件。即使在移除之后，它仍然被调用。旋转事件仍然被调用，而不是一个选项。有趣的是…乍一看并没有看到这一点。我会检查一下我更新的答案是否有效。不知道为什么会发生错误。也许这是一个jQueryUI错误……但不是surestop和spin不太一样。现在已经实现了“黑客”——在摧毁旋转器之前在箭头上调用鼠标。他们停止了它的处理器，我把它完全移除。是的，当然……但是停止只是在旋转之后被调用，所以它不应该有太大的不同。不确定，也许值得开一张虫子票。

$(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");

            }
        }
    });
});