如何用 jquery 监听输入类型范围？

Posted 2023-05-09

【中文标题】如何用 jquery 监听输入类型范围？

【英文标题】：How to listen to input type range with jquery?

【发布时间】：2019-08-08 17:15:57

【问题描述】：

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

<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 调用仅在用户停止交互时触发的方式）？

【问题讨论】：

尝试使用keyup 事件而不是change

这是你想要的吗？ jsfiddle.net/ynf8cLx1

@CarstenLøvboAndersen 我在哪里可以看到 jsfiddle 上的控制台？似乎没有任何效果，keyup 也不起作用： $('#price_from').on("keyup", function (e)

在小提琴中按 F12 并单击控制台。但你可以根据需要将其更改为提醒

好的，似乎在您的示例中有效。在我的项目中它没有，相同的代码？！使用移动设备查看：staging.www.de.watchgurus.de/rolexandy:newpw2 点击标题中的过滤器并选择价格范围。

【参考方案1】：

slidestop 事件是专门为此目的而设计的：

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

在我的代码 sn-p 中尝试一下：https://***.com/a/44519349/4845566

【讨论】：

谢谢，我看到它在您的示例中有效。我的环境中一定有问题，因为这些事件都不会为滑块触发。请看一下：staging.www.de.watchgurus.de/omegaandy:newpw2 点击标题中的“过滤器”并更改价格。 js代码在这里：staging.static.watchgurus.de/MEW/subapp_search/app_local/…

我明白了。您不能使用$( document ).ready，因为JQM 小部件稍后在page 初始化期间实例化。您应该在 pagecreate 处理程序中挂钩滑块回调。这些事件不可委托-

我无法真正遵循您的建议。你能举个例子吗。 pagecreate 处理程序在哪里？

@merlin：添加了一个使用slidecreate 事件的示例（暂时忘记pagecreate）。

你是个天才！请问为什么这是必要的以及您是如何解决的？这可能与我也无法更改最小/最大值的事实有关。事件正在触发，但以下命令无效：$('#price_to').slider("option", "max", obj.stats.price_max);