javascript - 检测 slider 变化

Question

我有

7 个 slider ，当我的 slider 中的 1 个移动时，我试图显示 save 按钮。

HTML

 <div class="schedule-sliders device-schedule-sliders time-range" ng-show="device.acl_mode == 3"> .... </div>

我试过了

如您所见，device-schedule-sliders 就在那里。

    console.log('A');
    $(".device-schedule-sliders").on('click',function(){
        console.log('clicked');
        alert('RUN');
        $scope.buttonShow.acl = true;
    });
    console.log('B');

我无法运行我的函数。

---

如果我在控制台上试过

console.log($(".device-schedule-sliders"));

我得到了

[prevObject: n.fn.init(1), context: document, selector: ".device-schedule-sliders"]

如何进一步调试它？

---

Updated

感谢 @Prera​​k Sola，我更新了我的代码并重新尝试为我的 slider 提供一个 ID

id="device-schedule-sliders"

<div id="device-schedule-sliders" class="schedule-sliders time-range" ng-show="device.acl_mode == 3">

....

和JS

 $("#device-schedule-sliders" ).on( "slidechange", function( event, ui ) {
        //Toggle your save button
        console.log('clicked');
        alert('RUN');
        $scope.buttonShow.acl = true;
    });

结果

还是一样，我无法让我的 alert fn 运行。

Answer 1

您可以监听 slider 上的 change 事件。你可以这样做:

$( ".slider-range" ).on( "slidechange", function( event, ui ) {
    //Toggle your save button
});

引用:docs

这是一个有效的 fiddle适用于 id。