Javascript Jquery Mobile Slider 更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5501536/
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
Jquery Mobile Slider change event
提问by Mike James
I have a jquery mobile slider on a simple page. When I drag the slider, the value updates as expected in the textbox. I have looked but cannot find where this logic is happening.
我在一个简单的页面上有一个 jquery 移动滑块。当我拖动滑块时，文本框中的值会按预期更新。我已经看过了，但找不到这个逻辑发生的地方。
What I would like, is to pass the value into a javascript function. How can I bind the change event to my function?
我想要的是将值传递给一个 javascript 函数。如何将更改事件绑定到我的函数？
Cheers
干杯
Mike.
麦克风。
Code below - please ignore some nasty hacks:
下面的代码 - 请忽略一些讨厌的黑客：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile Docs - Forms</title>
<link rel="stylesheet" href="fader/jquery.mobile-1.0a3.css" />
<script type="text/javascript" src="fader/jquery-1.5.js"></script>
<script type="text/javascript" src="fader/jquery.mobile-1.0a3.js"></script>
<script>
$('#slider-1').changed(function () {
alert("Test");
});
</script>
<style type="text/css">
.toolbar {
-webkit-box-sizing: border-box;
border-bottom: 1px solid #000;
padding: 10px;
height: 45px;
background: url(fader/Resources/Themes/JQT/img/toolbar.png) #000000 repeat-x;
position: relative;
}
.toolbar > h1 {
position: absolute;
overflow: hidden;
left: 50%;
top: 10px;
line-height: 1em;
margin: 1px 0 0 -75px;
height: 40px;
font-size: 20px;
width: 150px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 1) 0 -1px 1px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
}
.button, .back, .cancel, .add {
position: absolute;
overflow: hidden;
top: 8px;
right: 10px;
margin: 0;
border-width: 0 5px;
padding: 0 3px;
width: auto;
height: 30px;
line-height: 30px;
font-family: inherit;
font-size: 12px;
font-weight: bold;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
background: none;
-webkit-border-image: url(fader/Resources/Themes/JQT/img/button.png) 0 5 0 5;
}
body > * {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729));
}
.back {
left: 6px;
right: auto;
padding: 0;
max-width: 55px;
border-width: 0 8px 0 14px;
-webkit-border-image: url(fader/Resources/Themes/JQT/img/back_button.png) 0 8 0 14;
}
.back.active {
-webkit-border-image: url(Fader%20Test%20-%20Trade%20show/img/back_button_clicked.png) 0 8 0 14;
color: #aaa;
}
h1, h2 {
font: bold 18px Helvetica;
text-shadow: rgba(255, 255, 255, .2) 0 1px 1px;
color: #FFF;
margin: 10px 20px 5px;
}
body {
background: #000;
color: #ddd;
}
</style>
</head>
<body>
<div class="ui-body-a" data-role="page">
<div class="toolbar">
<h1>Input</h1>
<A class="back" HREF="javascript:javascript:history.go(-1)">Home</A
></div>
<form action="#" method="get">
<div class="ui-body-a" data-role="fieldcontain">
<h1>Lighting Intensity</h1>
<input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100" data-theme="b" data-track-theme="a" orientation="vertical" />
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
回答by tmtysk
Michael. Try to surround the slider with another element:
迈克尔。尝试用另一个元素包围滑块：
<div id="div-slider">
<input type="range" id="slider-1" />
</div>
And you can get an event on change:
你可以得到一个关于变化的事件：
$("#div-slider").change(function() {
var slider_value = $("#slider-1").val();
// do something..
});
回答by Erez Rabih
The problem with your code is that the javascript binding the event of change to the elements is evaluated beforethey were actually created in the html, thus no element get binded to the change event as you specified.
您的代码的问题在于，将更改事件绑定到元素的 javascript在它们实际在 html 中创建之前被评估，因此没有元素按照您的指定绑定到更改事件。
Try this:
尝试这个：
$('#slider-1').live('change', function(){
doYourStuffHere();
});
Briefly, live means that JQuery will keep on binding events to elements matching the specified selector even if they were not present at time of evaluating the JS for binding, so this code will bind all present and futurehtml elements which match #slider-1 selector with the proper change callback.
简而言之，live 意味着 JQuery 将继续将事件绑定到与指定选择器匹配的元素，即使它们在评估 JS 进行绑定时不存在，因此此代码将绑定与 #slider-1 选择器匹配的所有当前和未来的html 元素使用适当的更改回调。
Another alternative is to use JQuery 'on' binding which acts little bit differently, but can still do the job. Have a look at the documentation for 'on' here.
另一种选择是使用 JQuery 'on' 绑定，它的行为略有不同，但仍然可以完成这项工作。在此处查看“on”的文档。
回答by zeros-and-ones
I highly suggest checking out w3schools tutorial on this.
我强烈建议您查看 w3schools 教程。
http://www.w3schools.com/jquerymobile/jquerymobile_events_intro.asp
http://www.w3schools.com/jquerymobile/jquerymobile_events_intro.asp
The crucial piece of code that you are missing is:
您缺少的关键代码是：
$(document).on("pageinit","#pageone",function(){
// PLACE ALL YOU EVENTS CODE HERE e.g.
$( "#slider" ).on( 'slidestop', function( event ) {
alert ('hi');
});
}
Make sure your content is prefixed with:
确保您的内容前缀为：
<div data-role="page" id="pageone">
<div data-role="content">
<input type="range" name="slider" id="slider" value="10" min="0" max="100">
</div>
</div>
回答by Cristianpark
I had the same problem, too many troubles with the event of the slider. Finally I found 'slidestop' event that works great. This is the code:
我遇到了同样的问题，滑块事件有太多麻烦。最后，我发现 'slidestop' 事件效果很好。这是代码：
$( "#slider-1").on('slidestop', function( event ) {
var slider_value=$("#slider-1").slider().val();
alert('Value: '+slider_value);
});
I hope this work for you
我希望这对你有用
回答by nskeskin
Use this code,
使用此代码，
$( ".mySliders" ).slider({
create: function (event, ui) {
$(this).bind('change', function () {
});
}
});
Do not put type="range"to your input tags, put type="text"instead.
不要放入type="range"您的输入标签，type="text"而是放入。
Since you are calling slider function manually.
由于您正在手动调用滑块功能。
回答by gertiMN
The documentation appears to be lacking. After searching for a long time I found that to get the new value in the event handler, something like $(this).slider().val()is needed (the extra slider()being the part omitted almost everywhere):
文档似乎缺乏。搜索了很长时间后，我发现要在事件处理程序中获取新值，$(this).slider().val()需要类似的东西（额外slider()的部分几乎无处不在）：
$("#div-slider").change(function() {
var slider_value = $(this).slider().val();
// do something..
});
回答by K. Kilian Lindberg
Shortest yet and functional.
最短但功能齐全。
$('body').change(function() {
var slider_value = $('#slider-1').val();
if(slider_value == 4000){
alert("Holy smoke!");
}
}
回答by Hoff
I'm not too familiar with jquery mobile, but adding a change handler to the original input element should do:
我对 jquery mobile 不太熟悉，但是向原始输入元素添加更改处理程序应该可以：
$('#slider-1').change(function(){
var slider_value = $(this).val()
console.log(slider_value)
// do whatever you want with that value...
})
Hope this help,
希望这有帮助，
Martin
马丁
回答by Flori
try this:
尝试这个：
var self = this;
this.sliderTouchUp = function() {
var currentVal = $('#slider-1').val();
console.log("val change to " + currentVal);
};
$('.ui-slider').live('mouseup', self.sliderTouchUp);
$('.ui-slider').live('touchend', self.sliderTouchUp);
回答by ale
i'm using this code and it works in jquery mobile 1.4.3.
我正在使用此代码，它适用于 jquery mobile 1.4.3。
$(".ui-slider").on('change', function(event) {
var valuenow = $(this).find(".ui-slider-handle").attr("aria-valuenow");
console.log(valuenow);
});
