Pregunta sobre html5, jquery, range, javascript – JQuery Range Input Listener

19

Hey teniendo un poco de problemas jQuery y el rango de hmtl5. Intento obtener los valores a medida que cambian, pero el detector de eventos no los captura. Actualmente mi código es:

HTML

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

Y el JS es:

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

También he intentado

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

Ninguno parece funcionar. ¿Estoy haciendo algo mal?

¿Se agrega el controlador de eventos después de que la entrada de rango se inyecta en el DOM? Andreas

Tu respuesta

5   la respuesta
0

Varias pruebas y errores corregidos!

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

});
</code>
12

No parece tener ningún problema en HTML5<input type="range"> utilizandochange.

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

@CarolineSchnapp - Corregido. Derek 朕會功夫
en Chrome, al menos, la conexión del controlador al evento de "entrada" se activa incluso cuando se desplaza. para el evento 'cambio', este no es el caso. así que opté por el 'cambio', ya que el desplazamiento no se considera una entrada en mi caso. el efecto de desplazamiento podría ser problemático si su manejador activa la manipulación de dom o las llamadas ajax. Luke W
Solo actualiza el valor del intervalo cuando suelto el botón deslizante, en el teclado. En Google Chrome versión 34.0.1847.116 usando jQuery 2.0.3. Caroline Schnapp
Puede que no sea un gran problema, pero también se activa cuando solo se desplaza el deslizador con el mouse. de lo contrario una gran solución! Willi Mentzel
22
<code>$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
</code>

Esto dispara elchange evento en cadainput evento.

4

Supongo que su lapso tiene una identificación:<span id="slidernumber">...</span> Supongamos también que tiene algunos controles deslizantes y desea ver un cambio de texto si se moviera alguno de ellos:

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

Prueba esto:

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

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

Ahora supongamos que tiene algunos controles deslizantes, pero desea ver un cambio de texto si se moviera uno de ellos en particular. (Lo asumo porque la entrada de rango está dentro de la etiqueta li, y le pusiste un nombre):

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

Prueba esto:

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

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

1

El evento on change parece estar funcionando correctamente para mí:http://jsfiddle.net/zV3xD/7/

<code><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);
});​
</code>

O puedes probar algo comoesta:

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

Utilizando laoutput ejemplo aquí:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Hola, @CarolineSchnapp: he actualizado mi ejemplo para mostrar otra forma de abordar este problema. Si no es suficiente, hágamelo saber y podemos averiguar algo que lo hará. Chase
Solo actualiza el #newValue cuando suelto el botón del control deslizante, en el teclado. En Google Chrome versión 34.0.1847.116 usando jQuery 2.0.3. Caroline Schnapp

Preguntas relacionadas