jquery.ui.spinner change

Question

Estoy tratando de usar la última versión de jquery.ui.spinner.js. http://wiki.jqueryui.com/w/page/12138077/Spinner

Los rotuladores se muestran y actualizan los cuadros de texto, pero tengo problemas para averiguar cómo capturar el evento 'cambio'. Se activa cuando se cambia manualmente el valor en el cuadro de texto, pero no cuando se usan las flechas direccionales.

jQuery:

$('input[name*="opening"]').spinner({ min: 0, max: 100}); 

    $('#doorsize6w7h-f').spinner().change(function(){ 
     alert($(this).spinner('value')); 
    }); 

html:

<input type="text" value="0" class="front" id="doorsize6w7h-f" name="opening[0][0]" /> 

Answer 1

Adjuntar un evento sobre los controles de número que llama change() en su campo respectivo.

$('.ui-spinner-button').click(function() { 
    $(this).siblings('input').change(); 
}); 

jsFiddle.

Después de configurar la ruleta.

Answer 2

creo que esto es lo que necesita:

$('.mySpinner').spinner({   
    stop:function(e,ui){ 
     alert('Triggered after a spin.'); 
    } 
}); 

A diferencia de la unión al click caso de los botones, esto también va a detectar el uso de las teclas arriba/abajo en el teclado.

Ver esta página para obtener más información y más eventos: http://api.jqueryui.com/spinner/#entry-examples

Answer 3

Bueno, en realidad habría cambios de ruta a través de 'cambio' estándar de eventos y capturar todo, como que:

$('input[name*="opening"]').spinner({ 
    min: 0, 
    max: 100, 
    spin: function(event, ui) { 
     $(this).change(); 
    } 
}); 

Answer 4

No hay " cambio" de eventos, en lugar de utilizar "evento spinstop":

$('#doorsize6w7h-f').on("spinstop", function(){ 
    alert($(this).spinner('value')); 
}); 

La documentación también sugiere spinchange evento, pero es un poco lento para mí.

de recursos: http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner%2Fspinner%26redirect%3Dno#event-change

Answer 5

Sé que esta pregunta ya ha sido contestada. Pero espero que esto ayude a otros.

Además de editar manualmente el valor y usar el botón de flecha de la flecha giratoria, también se puede editar el valor de la flecha con el botón de flecha del teclado. En este caso, me parece evento keyup es más robusto que el cambio de eventos:

$(document).ready(function(){ 
    var range_spinner = $('.spinner').spinner(); 

    // hack to trigger input keyup whenever spinner button clicked: 
    $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); }); 

    // keyup will catch any stroke on keyboard 
    $('#range').keyup(function(){ 
     console.log(range_spinner.spinner('value')); 
    }); 
}); 

Answer 6

Esto me está dando los resultados más fluidos:

function betterSpinner(input) 
{ 
    input.spinner(
    { 
     spin: function(event, ui) 
     { 
      // the spin event is raised before the value actually gets changed, 
      // so let's update it here before raising the input's change() event. 
      input.val(ui.value); 
      input.change(); 
     } 
    }); 
} 

$(document).ready(function() 
{ 
    betterSpinner($("#myInput")); 
});