javascript - JQuery 范围事件未触发。

标签 javascript jquery

我想在用户更改 JQuery 范围控件上的值时更新一个值。我试着按照给定的例子 here ,但是它不起作用。

 $(document).ready(function () {
        alert('ready1'); //This fires when the page loads. 

        // Logs the value while the user is moving the slider
        $('.price-min').on('input', getValue);

        function getValue(e) { //This never fires 
            var val = $(e.element).val();
            alert(val); 
        }
    });

HTML:

<div data-role="rangeslider">
    <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
    <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>

有人能告诉我哪里错了吗?

最佳答案

您的代码有几件事。

  1. 您正在按类别选择元素 ($('.price-min')),但您的范围有一个 ID ($('#price-min)').
  2. 监听 change 事件。

 $(document).ready(function () {
        function getValue(e) { // now this fires on range change event 
            var val = $(this).val();
            console.log(val); 
        }
        // Logs the value while the user is moving the slider
        $('#price-min').on('change', getValue);


    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-role="rangeslider">
    <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
    <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>

关于javascript - JQuery 范围事件未触发。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46779639/

相关文章:

javascript - Form To Wizard 和 Zurb Foundation 遵守验证

php - 学习如何通过 CodeIgniter 使用 AJAX

javascript - 需要消除一个 .click() 事件

Jquery - 我的第一个插件 - 我无法存储数据

javascript - AngularJS访问动态生成的表单字段ID

javascript - 增加每个输入的名称属性,但在使用 jQuery 克隆后将单选按钮组合在一起

javascript - 图像 slider 中的最后一个图像在 mouseenter 上跳跃

javascript - 手动打开带有文本内容的 Featherlight Gallery

jquery - 将来自 instagram 的 RSS 图片提要添加到网站

jquery - 如何使用 jquery 滚动一点后停止 div