在具有数据滑块的输入标签上调用 Jquery 函数答案

【问题标题】：Call Jquery function on Input tag having data-slider在具有数据滑块的输入标签上调用 Jquery 函数
【发布时间】：2019-07-31 15:24:39
【问题描述】：

我正在使用 AdminLTE Bootstrap 管理仪表板模板提供的现成模板。我在 html 页面上有以下滑块输入并想在滑块上调用 jquery 事件

<div class="price-range"><!--price-range-->
  <h2>Price Range</h2>
  <div class="well text-center">
    <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="600" data-slider-step="5" data-slider-value="[250,450]" id="sl2" ><br />
    <b id="min" class="pull-left">$ 0</b>
    <b id="max" class="pull-right">$ 600</b>
  </div>
</div><!--/price-range-->

看起来，

当我在其中滑动值时如何调用事件？

我尝试关注但不工作，

$(document).on('blur change click dblclick error focus focusin focusout hover keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup resize scroll select submit', '#sl2', function() {
  alert("hii")
});

【问题讨论】：

根据您使用的插件，该事件可能不会在原始输入上引发，而是在插件实例本身上引发。我建议参考他们的文档
@RoryMcCrossan 我明白你的意思，我需要更深入地检查它，我会尽快删除或更新问题。
我认为您使用的插件实际上不会触发代码中的更改事件。如果 Javascript 改变了一个输入值，那么自然不会触发 change 事件！只有用户输入触发自然变化事件。

标签： javascript jquery html adminlte bootstrap-slider

【解决方案1】：

根据bootstrap-slider doc，您必须处理“slideStop”事件。你已经为你准备了一个样本fiddle。

const slider = $('#ex1').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

slider.on('slideStop', function(e) {
  console.log('value = ' + e.value);
});

【讨论】：

感谢您通过示例进行问答编辑。它就像魅力一样 :) 我在前端不是那么好。