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").bind("keyup", function() { alert('here'); } );

绝对没有:(

我必须说我错误地认为 jQueryMobile使用了jQueryUI控件，因为这是我的第一个想法，但现在深入研究事件，我看到的情况并非如此，只是在CSS设计方面。

我该怎么办？

移动滑块source code可以在Git上找到，如果它可以帮助任何人以及JSBin

找到测试页

据我所知，#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>

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

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

修正

从伊万回答，我们只需要：

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

我希望这对你有用

Answer 2

我解决您的问题的方法是将处理程序连接到tap和taphold事件。 Tap被挂在滑块的div元素上，而taphold被挂在元素上（滑块控制按钮）。

滑块的HTML标记：

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

JS：

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

函数makesAjaxChange（elem）对服务器进行更新。这里还有另外一点需要注意，在输入字段中更改值不会更新服务器，因此您必须绑定函数来更改输入元素的事件。此外，您必须注意，通过执行此操作，每个滑块控件移动都将触发输入元素更改，因此您也必须解决此问题。

这就是为什么jQuery Mobile不是移动设备的jQuery UI。你没有把这些东西整理好，必须自己做。

我希望这会有所帮助。

编辑：我忘了解释为什么点击div.ui-slider并在a.ui-slider-handle上点击。 div.ui-handler tap用于点击/点击事件，用户只需点击或点击滑动条上的手指即可。 a.ui-slider-handle tabhold是指用户使用鼠标或手指左右移动滑动条并将其释放后。

伊万

Answer 3

我找到了一个更简单的解决方案来解决这个问题。使用此代码，您可以在滑块上改进启动和停止事件。

$('.ui-slider').live('mousedown', function(){$('#'+id).trigger('start');});
$('.ui-slider').live('mouseup', function(){$('#'+id).trigger('stop');});
$('.ui-slider').live('touchstart', function(){$('#volumeSlider').trigger('start');});
$('.ui-slider').live('touchend', function(){$('#volumeSlider').trigger('stop');});

Answer 4

我发现使用Ivan的解决方案存在一些问题。如果拖动滑块，暂停一会儿（不要抬起鼠标按钮）并继续拖动滑块，不再触发taphold -event。

通过将vmouseup和mouseup事件添加到滑块div中，您可以获得改进，但如果鼠标光标远离滑块上方，滑块仍然无法触发事件。

Answer 5

基于@VTWood的解决方案;这是所有jQuery-Mobile 1.1滑块的通用“修复”，因此它们会在适当的时间发送start和stop个事件。您只需将此代码放入页面一次即可修补所有未来的幻灯片。

$(document).on({
    "mousedown touchstart": function () {
        $(this).siblings("input").trigger("start");
    },
    "mouseup touchend": function () {
        $(this).siblings("input").trigger("stop");
    }
}, ".ui-slider");

简而言之，它将事件侦听器绑定到文档对象，该对象侦听从mousedown元素触发的touchstart和.ui-slider事件。一旦触发，处理程序函数将找到input元素，该元素位于被点击的.ui-slider控件旁边并触发start事件。您可以像这样使用它：

$("#my-slider").on("start", function () { 
    console.log("User has started sliding my-slider!");
});

$("#my-slider").on("stop", function (event) {
    var value = event.target.value;
    console.log("User has finished sliding my slider, its value is: " + value);
});

Answer 6

<input type="range" id="player-slider" value="25" min="0" max="100"/>

$( "#player-slider" ).bind( "change", function(event, ui) {
    alert ("changed!");
});

Answer 7

如果您想在释放滑块时捕获事件（最有可能优化ajax请求）。

这对我有用：

var slider = $('#my_slider');
//as the answer from @nskeskin you have to remove the type range from your input on the html code
slider.slider({create:function(){
    //maybe this is too much hacking but until jquery provides a reference to this...
    $(this).next().children('a').bind('vmouseup', yourOnChangeCallback);
}
});

此外，这可以防止您在尚未初始化（或创建）控件时添加事件，因此我认为等待创建事件更加正确。

Answer 8

 $('#slider').next().children('a').bind('taphold', function () {
        $('#slider').live("change", function (event, ui) {
          //do these.....
        });
    });

Answer 9

您可以通过以下链接查看最简单的方法。您将获得所有移动设备的代码。

http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/

jQuery Mobile：如何使用滑块事件？

9 个答案: