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); 
    } 
});