Question

我正在使用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>

现在的问题是当滑块改变时输入字段值被改变但改变事件没有调用..问题是什么，如何解决这个问题..？

Answer 1

隐藏元素的值变化不会自动触发.change()事件。因此，在这种情况下，您可以使用onstatechange的{{1}}，

jRange Slider

Working Demo

onstatechange: function(){
    $(".js-slider").trigger('change'); // call trigger or change() from here
}

Answer 2

您需要在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>

Answer 3

尝试以下代码：

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

});

jquery更改事件不调用input元素

3 个答案: