2011-03-21 10 views
6

Soy nuevo en jQuery y pensé que utilizaría sus botones en lugar de algunos botones de opción en mi aplicación. Documentación aquí: http://jqueryui.com/demos/button/#radiojQuery buttonset change

¿Cómo agregar un controlador a un evento cuando el conjunto de botones cambia el valor?

Aquí hay un fragmento del código que he intentado:

$('input.tod_quant').change(function() { 
    alert('TEST'); 
}); 

Y luego más adelante en el código HTML:

<span id="tod_quant" class="buttonset"> 
     <input type="radio" id="tod_quant5" name="tod_quant" value="5" /><label for="tod_quant5">5-Minute</label> 
     <input type="radio" id="tod_quant60" name="tod_quant" checked="checked" value="60" /><label for="tod_quant60">60-Minute</label> 
     </span> 

El evento "cambio" nunca se dispara. ¿Hay incluso un evento de cambio? ¿Cómo puedo hacer esto? Además, ¿hay alguna documentación con un ejemplo? http://jqueryui.com tiene muchos ejemplos, y ninguno que puedo encontrar muestra ningún evento que se active. Supongo que mi desconocimiento de jQuery no está ayudando exactamente a la situación.

Cualquier ayuda sería muy apreciada. Gracias.

Respuesta

6

¡Ja! Problema resuelto. He estado pirateando todo el día, y estaba justo en frente de mí.

Sólo tenía que cambiar la forma en que estaba seleccionando el elemento a esto:

$('#tod_quant') 
+0

Tu respuesta brilló cuando escribía lo mismo ... ¡shucks! –

9

No hay eventos para change botones en jQuery-UI.

Usted debe escuchar a cambiar o en caso de que los botones de radio subyacentes:

http://jsfiddle.net/marcosfromero/kr2Xc/

+2

Si bien esto es cierto, puede escuchar un evento de cambio aplicado al botón configurado. Parece un huevo de Pascua jQuery, pero funciona bien: '$ ('# tod_quant'). Buttonset(). Change (function() {// do stuff});' – jdp

-1
<script> 
    $(function() { 
     $("#radio").buttonset(); 
    }); 
    </script> 



<div class="demo"> 

<form> 
    <div id="radio"> 
     <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> 
     <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
     <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
    </div> 
</form> 

uso de este código y comprobar si se está incluyendo los jquery.js y jqueryui .js archivos o no.

2

he tenido este problema, y ​​lo resolvieron este de la siguiente manera: creé un controlador de eventos para etiquetas:

$('.label-class').click(LabelClicked); 
$('.input-class').change(InputChanged); 
function LabelClicked() { 
    var input = $('#' + $(this).attr('for')); 
    if(input) 
     input.trigger('change'); 
    return true; 
} 
function InputChanged() { 
    //do your work with this event 
} 

hay otra manera! Probé de varias maneras y finalmente decidí hacer esto

+0

Como nota adicional para quienes usan checkbox creados dinámicamente, debe incluir el controlador de eventos DESPUÉS de la llamada a buttonset(). Si obtiene los campos de ajax, debe hacerlo en cada actualización. Es obvio cuando lo piensas, pero pasé una buena cantidad de tiempo comprobando los errores tipográficos y la sintaxis antes de darme cuenta de que creé un controlador en algo que no existía. – carruthd