JQuery的范围输入监听器(JQuery Range Input Listener)

嘿，有一个小麻烦的jQuery和HMTL5范围。我试图让值作为他们改变，但事件侦听器没有捕捉它。目前，我的代码是：

HTML

html += '<li>Apply Credits: <input type="range"  min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'

而JS是：

$('#discount_credits').mousewheel( function() { 
        alert('it changed!'); 
        alert('new value = ' + $(this).val()); 
    });

我也试着

$('#discount_credits').change( function() { 
            alert('it changed!'); 
            alert('new value = ' + $(this).val()); 
        });

既不似乎工作。难道我做错了什么？

Answer 1:

$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});

这触发了change的每个事件input事件。

Answer 2:

似乎不具有任何问题上HTML5 <input type="range">使用change 。

请参阅： http://jsfiddle.net/DerekL/BaEar/33/

Answer 3:

我假设你的跨度有一个id： <span id="slidernumber">...</span>让我们还假设你有几个滑块，并希望看到文本的变化，如果任何人被感动：

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
</li>

<span id="slidernumber">50</span>

试试这个：

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newval=$(this).val();
    $("#slidernumber").text(newval);
  });
});

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

现在让我们假设你有几个滑块，但你要看到文本的变化，如果他们中的一个特定被感动。（我想这是因为输入范围为L1标签里面，你给它一个名字）：

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

试试这个：

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newv=$(this).val();
    $(this).next().text(newv);
  });
});

http://jsfiddle.net/MahshidZeinaly/2pe7P/1/

Answer 4:

在上改变事件似乎为我工作正常： http://jsfiddle.net/zV3xD/7/

<input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" />

<span id="newValue" value="0">0</span>

$('#discount_credits').change( function() {
    var newValue = this.value;        
    $('#newValue').html(newValue);
});

或者你可以尝试像这样：

<form oninput="result.value=parseInt(a.value)">
    <input type="range" name="a" value="50" /> =
    <output name="result">0</output>
</form>

使用output例子在这里： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Answer 5:

一些试验和错误修复！

$('input[name=form_range]').change('mousestop',function () {

});

文章来源: JQuery Range Input Listener