Question

我试图使用jquery-ui滑块，但所有事件都没有触发（我已经测试了change和slide事件），我试过了通过bind()绑定事件但没有任何反应，这是我的代码：

HTML

<div class="widget-content-range">                              
    <input class="passangers_range" value="0;5" name="passangers_range" />
</div>

JAVASCRIPT

$(".passangers_range").slider({
    from:1,
    to:5,
    step:1,
    dimension:'',
    slide: function(event, ui) {
        console.log(ui.value);
    },
    change: function(event, ui) {
        console.log(ui.value);
    }
});

请任何想法。

Answer 1

这对我来说很好。

jQuery(".passangers_range").on("change", function(event,ui) {
    console.log(event.value.newValue);
});

Answer 2

我有一个类似的问题（当滑块更改输入字段值时，表单onChange不会触发），但是出于完全不同的原因。

我通过向滑块更改事件添加$('#frm').trigger('change');解决了我的问题。

HTML

<strong>Speed</strong>
<div class="card">
    <div class="slider" id="speed-slider">
    <div class ="custom-handle ui-slider-handle"></div>
</div>
<input type="hidden" name="speed" value="220" />

JAVASCRIPT

var speedhandle = $("#speed-slider .custom-handle");
$("#speed-slider").slider({
    range: "min",
    max: 255,
    value: 220,
    slide: function(event, ui) {
        speedhandle.text(ui.value);
    },
    change: function(event, ui) {
        speedhandle.text(ui.value);
        $('input[name="speed"]').val($(this).slider("value"));
        $('#frm').trigger('change');
    }
});

我很确定这是错误的方法，但是目前它解决了我的问题。

事件不会在JQuery ui Slider中触发

2 个答案: