JQuery UI Slider组件change事件未触发问题排查与解决

问题表现 #

使用jQuery UI Slider组件时出现change事件无响应的异常：页面渲染后审查元素可见目标input已被转换为Slider组件，但滑动滑块时change事件绑定的回调没有任何触发。

原有错误代码 #

HTML代码

<div id="volume_master_container" class="volumeContainer">
    M<br>
    <input type="range" class="volumeSlider" data-target="" id="volume_master" orient="vertical">
</div>

JS初始化代码

$(".volumeSlider").slider({
    change: function(event, ui) {
        console.log("changing");
    }
});

问题根因 #

jQuery UI的slider()初始化方法需要绑定到div类型的容器元素上，上述代码错误地将方法绑定到了input元素上，导致事件绑定失效。

修复方法 #

将slider初始化绑定的目标改为外层的div容器即可，修改后所有事件和功能均可正常运行。

内容的提问来源于stack exchange，提问作者Styles2304