首页 > 解决方案 > 如何用 jquery 监听输入类型范围?

问题描述

我试图通过更改 jquery 移动范围最小/最大滑块在用户交互时通过 ajax 加载一些数据。

<label for="filter_price">Preis:</label>
   <div data-role="rangeslider" id="filter_price" style="touch-action: none;">
   <input type="range" name="price_from" id="price_from" min="1" max="2000" value="1" data-popup-enabled="true" class="filter_watch">
    <input type="range" name="price_to" id="price_to" min="1" max="20000" value="20000" data-popup-enabled="true" class="filter_watch">
</div>

js:

$('#price_from').on("change mousemove", function 
 () {
   alert('price filter'); 
})

https://jsfiddle.net/28avj4x5/

在 jsfiddle 上,每次鼠标移动都会触发警报,而只有 chagne 应该触发。在我的项目中,该事件根本不会触发。我也试过change.(function...没有任何效果。

如何在更改值并释放按钮时触发事件(仅在用户停止交互时触发 ajax 调用的方式)?

标签: jqueryjquery-mobile

解决方案


slidestop活动专门为此目的而设计:

$(document).on("slidecreate", "#price_from", function(e) {
  $(this).on("slidestop", function() {
    var val = $(this).val();
    // pass val to the ajax call
  });
});

在我的代码片段中尝试一下:https ://stackoverflow.com/a/44519349/4845566


推荐阅读