我正在使用jRange sliders并且它需要输入字段,所以我创建了该字段,并且创建了jRange滑块...
我的代码
<input type="hidden" class="js-slider" value=0 />
<script>
jQuery('.js-slider').jRange({
from: 0,
to: 50,
step: 1,
scale: [0,25,50],
format: '%s',
width: 200,
showLabels: true,
theme:"theme-blue"
});
jQuery(".js-slider").change(function(){
console.log("changed");
});
</script>
现在的问题是当滑块改变时输入字段值被改变但改变事件没有调用..问题是什么,如何解决这个问题..?
答案 0 :(得分:1)
隐藏元素的值变化不会自动触发.change()事件。因此,在这种情况下,您可以使用onstatechange
的{{1}},
jRange Slider
onstatechange: function(){
$(".js-slider").trigger('change'); // call trigger or change() from here
}
答案 1 :(得分:1)
您需要在change
回调方法中附加onstatechange()
个事件,请参阅下面的示例代码
<script>
jQuery('.js-slider').jRange({
from: 0,
to: 50,
step: 1,
scale: [0,25,50],
format: '%s',
width: 200,
showLabels: true,
theme:"theme-blue",
onstatechange: function(){
$(".js-slider").change() //trigger change even on element
}
});
jQuery(".js-slider").change(function(){
console.log("changed");
});
</script>
答案 2 :(得分:0)
尝试以下代码:
jQuery('.range-slider').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 230,
showScale: false,
showLabels: true,
isRange: false,
onstatechange: function(){
jQuery('.range-slider').trigger('change');
}
});
jQuery('.range-slider').on('change', function() {
console.log(this.value);
});