JQuery范围事件未触发。

Question

我想在用户更改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> 

有人能告诉我，我错了？

Answer 1

一些事情与您的代码。

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>

Answer 2

您使用的是类选择：

.price-min 

取而代之的是ID选择的：

#price-min 

您还需要得到这的代替e.element：

$(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) { 
    var val = $(this).val(); 
    alert(val); 
    } 
});