Listener ingresso intervallo JQuery

Question

Ehi, ho un po 'di problemi con jquery e la gamma hmtl5. Cerco di ottenere i valori come sono cambiati ma il listener di eventi non lo sta acquisendo. Attualmente il mio codice è:

HTML

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

E il JS è:

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

Ho anche provato

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

Né sembrano funzionare. Sto facendo qualcosa di sbagliato?

Answer 1

L'on evento di modifica sembra funzionare correttamente per me: 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); 
});​ 

Oppure si può provare qualcosa di simile this:

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

Utilizzando l'esempio output qui: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Answer 2

Non sembra avere alcun problema su HTML5 <input type="range"> utilizzando change.

See: http://jsfiddle.net/DerekL/BaEar/33/

Answer 3

Presumo la durata della ha un ID: <span id="slidernumber">...</span> consente inoltre supporre che avete un paio di cursori, e si desidera vedere un cambiamento del testo se qualcuno di loro sono stati spostati:

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

Prova questo:

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

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

Ora supponiamo di avere alcuni cursori, ma volete vedere un cambio di testo se uno di essi è stato spostato. (Presumo perché l'ingresso di gamma è dentro tag li, e avete dato un nome):

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

Prova questo:

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

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

Answer 4

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

Questa spara il change evento su ogni evento input.