JQuery Range输入监听器

Question

嘿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

在<input type="range">使用HTML5时似乎没有任何问题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/

现在让我们假设您有几个滑块，但是如果移动了其中的一个，您希望看到文本更改。（我假设它是因为范围输入在 li 标签内，并且您给它起了一个名字）：

<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

on Change 事件似乎对我来说工作正常：http ://jsfiddle.net/zV3xD/7/

\n\n

<input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" />\n\n<span id="newValue" value="0">0</span>\n\n$(\'#discount_credits\').change( function() {\n    var newValue = this.value;        \n    $(\'#newValue\').html(newValue);\n});\xe2\x80\x8b\n

\n\n

或者你可以尝试这样的事情：

\n\n

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

\n\n

使用output此处的示例：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

\n