jQueryMobile : how to work with slider events?

Question

我正在测试 slider事件jQueryMobile我一定错过了一些东西。

页面代码为:

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

如果我这样做:

$("#slider").data("events");

我明白了

blur, focus, keyup, remove

我想要做的是在用户释放 slider handle 后获取值

并将 keyup 事件 Hook 为

$("#slider").bind("keyup", function() { alert('here'); } );

什么也没做:(

我必须说，我错误地假设 jQueryMobile 使用 jQueryUI控件，因为这是我的第一个想法，但现在深入研究事件，我发现事实并非如此，仅在 CSS 设计方面。

What can I do?

jQuery Mobile slider source code可以在 Git 上找到如果它对任何人都有帮助，可以在 JSBin 找到测试页

<小时/>

据我了解，#slider 是带有值的文本框，因此我需要 Hook slider 句柄，因为该 slider 的生成代码是:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
    <label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
    <input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" />
    <div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
        <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text"></span>
            </span>
        </a>
    </div>
</div>

并检查处理程序 anchor 中的事件，我只得到click事件

$("#slider").next().find("a").data("events");

<小时/>

修复

根据 Ivan 的回答，我们只需要:

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

然后

$(document).bind("pagecreate", function(event, ui) {

    $('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); });
    $('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input')); 

});

function makeAjaxChange( elem ) { 
    alert(elem.val()); 
}

谢谢伊万的提醒。

Answer 1

试试这个代码:

$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);
});

我希望这对你有用