Question

我有一个连接到输入元素的滑块。我无法控制滑块的实现。每当移动滑块时，都会更新输入元素值。我可以使用$('#my-input').val()

进行检查

但是，正如文档here所述，我无法使用.change()事件处理程序检测到该更改，因为输入值的javascript操作不会触发该事件。

我的问题是：如何检测输入元素中的值是否已更改？在这种情况下会触发什么事件 - 如果有的话？

Answer 1

很高兴看到一个代码示例，这样我们就可以了解滑块移动时哪些元素会发生什么事件，但它应该是以下内容：

$(document).on('mousedown','.slider-handle',function(){
    curVal = $('input').val();
});

您需要使用适合您正在使用的滑块的选择器替换.slider-handle，mousedown可能还需要更改，具体取决于您想要挂钩的事件

Answer 2

使用此功能检测：

function addClassNameListener(elemId, callback) {
  var elem = document.getElementById(elemId);
  var lastClassName = elem.className;
  window.setInterval( function() {   
    var className = elem.className;
    if (className !== lastClassName) {
      callback();   
      lastClassName = className;
    }
  },10);
}

用法：

addClassNameListener("moved", function(){
  // do something...
})
// This code will listem all classes that contains "moved" classname and callback that function

Answer 3

如果您使用jQuery UI作为滑块功能，则更改事件将触发滑块元素而不是输入。

$('.slider').slider(); //init jQuery UI slider
$('.slider').on('slidechange', function(event, ui) {
    var newVal = ui.value;

    //do something when the value changes
});

您可以在jQuery UI页面上阅读有关此事件和其他事件的更多信息：http://api.jqueryui.com/slider/#event-change

您还可以访问slide和slidestop等可能更适合您的解决方案的活动。

检测输入元素的变化，使用javascript设置

3 个答案: