事件未在 JQuery ui 滑块中触发

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.slider.min - jquery slider plugin) 它覆盖了 jquery-ui 框架的 slider() 函数，它使用 callback() 函数来检测滑块的值变化。

非常感谢

Answer 2

这对我来说很好。

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

Answer 3

我遇到了类似的问题（滑块更改输入字段值时未触发表单 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 滑块中触发

Events are not firing in JQuery ui Slider

javascript

events

jquery-ui

onchange

slider