Javascript JQuery范围输入侦听器

嘿，jquery和hmtl5系列有点问题。我试图在值更改时获取它们，但事件侦听器没有捕获它。目前我的代码是：

HTML

我也试过了

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

---

两者似乎都不起作用。我做错什么了吗？

更改事件似乎对我来说工作正常：

0
$（“#折扣_积分”）。更改（函数（）{
var newValue=此.value；
$（'#newValue'）.html（newValue）；
});​

或者您可以尝试以下方法：

=
0

---

在这里使用

输出

示例：

在使用

更改

的HTML5上似乎没有任何问题

---

请参阅：

我假定您的span有一个id:

…

我们还假设您有几个滑块，如果其中任何一个被移动，您希望看到文本更改：

<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>

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

---

这会在每个

输入
事件上触发
change
事件。
几个测试和错误修复

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

});

事件处理程序是在将范围输入注入DOM后添加的吗？它仅在我在keyup上释放滑块按钮时更新#newValue。在使用jQuery 2.0.3.Hi@CarolineSchnapp的Google Chrome版本34.0.1847.116中，我更新了我的示例，以展示解决此问题的另一种方法。如果这还不够，请让我知道，我们可以找出一些可以解决的问题。它只会在我释放滑块按钮时在keyup上更新跨度值。在Google Chrome版本34.0.1847.116中，使用jQuery 2.0.3.@CarolineSchnapp-Fixed.可能没什么大不了的，但它也会在鼠标悬停滑块时触发。否则就是一个很好的解决方案！至少在Chrome中，即使在悬停时也会触发将处理程序附加到“输入”事件。对于“变更”事件，情况并非如此。所以我选择了“更改”，因为在我的例子中，悬停不被视为输入。如果处理程序触发dom操作或ajax调用，则悬停效果可能会出现问题。这并不能解决OPs问题（在用户仍按住鼠标按钮时捕获新值）：
<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>

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

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

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

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

});