即使值未更改,jQuery UI 滑块“更改”事件也会触发

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15508922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:13:17  来源:igfitidea点击:

jQuery UI slider 'change' event fires even when value has not changed

javascriptjqueryjquery-uijquery-ui-slider

提问by SexyBeast

I am trying to fire an event when a user slides the slider and the value is changed when the sliding stops. As per the jQuery docs, the changeevent would be ideal for this case. So I am trying this out:

我试图在用户滑动滑块时触发事件,并且在滑动停止时更改值。根据 jQuery 文档,该change事件非常适合这种情况。所以我正在尝试这个:

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>jQuery UI Slider - Default functionality</title>
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
            <link rel="stylesheet" href="/resources/demos/style.css" />
            <script>
                $(function() {
                    $( "#slider" ).slider({
                        change:function() { alert("foo"); }
                    });
                });
            </script>
        </head>
        <body>
            <div id="slider"></div>
        </body>
    </html>

However, I observe that when I drag the slider to the right and again drag it back to the starting point (the initial position of the slider at page-load), the alert still fires. Is this a jQuery bug? If no, how do I fix this?

但是,我观察到当我向右拖动滑块并再次将其拖回到起点(页面加载时滑块的初始位置)时,警报仍然会触发。这是一个jQuery错误吗?如果不是,我该如何解决这个问题?

回答by isherwood

$(function() {
    $("#slider").slider();

    var startPos = $("#slider").slider("value");, 
        endPos = '';

    $("#slider").on("slidestop", function(event, ui) {
        endPos = ui.value;

        if (startPos != endPos) {
            // do stuff
        }

        startPos = endPos;
    });
});

回答by Haroldo Torres

Just try.

你试一试。

$(function() {
    $("#slider").slider({
        slide: function(event, ui) {
            // use ui.value to get a number
            // do your functions
        }
    });
});