jQueryMobile：如何使用滑块事件？
我正在jQueryMobile中测试滑块事件，我一定错过了什么。
页面代码是：
如果我这样做：
$("#slider").data("events");
我明白了
blur, focus, keyup, remove
我想要做的是在用户释放滑块手柄后获取值
和keyup事件挂钩
$("#slider").bind("keyup", function() { alert('here'); } );
什么都不做:(
我必须说我错误地认为 jQueryMobile使用了jQueryUI控件，因为这是我的第一个想法，但是现在深入研究事件我可以看到情况并非如此，仅仅是在CSS设计方面。
我能做什么？
jQuery Mobile Slider 源代码可以在Git上找到，如果它可以帮助任何人以及在JSBin上找到测试页面
据我所知， #slider是带有值的文本框，所以我需要挂钩滑块手柄，因为此滑块的生成代码是：
并检查处理程序锚点中的事件我只得到click事件
$("#slider").next().find("a").data("events");
固定
从伊万回答，我们只需要：
然后
$(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()); }
谢谢伊万的抬头。
我对你的问题的解决方案是在tap和taphold事件上连接处理程序。 Tap被挂在滑块的div元素上，而taphold被挂在元素上（滑块控制按钮）。
滑块的HTML标记：
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上设置taphold。 div.ui-handler tap用于点击/点击事件，当用户只需点击或点击滑动条上的手指时。 a.ui-slider-handle tabhold是指用户使用鼠标或手指左右移动滑动条并将其释放后。
伊万
试试这段代码：
$( "#slider-1").on('slidestop', function( event ) { var slider_value=$("#slider-1").slider().val(); alert('Value: '+slider_value); });
我希望这对你有用
我找到了一个更简单的解决方案来解决这个问题。 使用此代码，您可以在滑块上改进启动和停止事件。
$('.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');});
我发现使用Ivan的解决方案存在一些问题。 如果拖动滑块，暂停一会儿（不要抬起鼠标按钮）并继续拖动滑块，不再触发taphold -event。
通过将vmouseup和mouseup事件添加到滑块div中，您可以获得改进，但如果鼠标光标远离滑块上方，滑块仍然无法触发事件。
基于@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");
简而言之，它将事件侦听器绑定到文档对象，该对象侦听从.ui-slider元素触发的mousedown和touchstart事件。 一旦触发，处理程序函数将找到与单击的.ui-slider控件并.ui-slider的input元素并触发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); });
$( "#player-slider" ).bind( "change", function(event, ui) { alert ("changed!"); });
如果您想在释放滑块时捕获事件（最可能是为了优化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); } });
此外，这可以防止您在尚未初始化（或创建）控件时添加事件，因此我认为等待创建事件更加正确。
$('#slider').next().children('a').bind('taphold', function () { $('#slider').live("change", function (event, ui) { //do these..... }); });
您可以通过以下链接查看最简单的方法。 您将获得所有移动设备的代码。
http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/