JQuery Agregar evento de clic al texto de entrada de radio

Me gustaría que la etiqueta asociada con un botón de radio 'caliente'. Empecé a implementar esto usando el método .siblings(). Creo que debe haber una mejor manera. El evento click en el botón de radio es el siguiente:JQuery Agregar evento de clic al texto de entrada de radio

$(".RadioButton").click(function(event) { 

     var questionId = $(this).find('input').attr('name'); 
     var responseId = $(this).find('input').attr('value'); 
     var answerText = displayPopupQuizAnswer($(this));

Esto funciona muy bien. Me gustaría que se ejecute el mismo código cuando el usuario hace clic en la etiqueta de texto que acompaña al botón de radio. El html se ve más o menos así:

<div class="answers"> 
<span class="radiobutton> 
<input type="radio" name="answer1"/> 
</span> 
<span class="answertextwrapper"> 
<a href="return false">this is the text</a> 
</span> 
</div>

Esto se simplifica pero está cerca. Lo que quiero es capturar el evento click en el elemento con class = "answertextwrapper", es decir $ (". Answerwrapper"). Haga clic en

Así que necesito hacer referencia de alguna manera a la entrada cuando se hace clic en el texto. ¿Tener sentido?

¿Alguna idea?

Fuente

2009-07-21 Nick

Simple, use actual label elements;

Cuando los utiliza, no solo obtiene una buena usabilidad, sino que su evento de clic está vinculado al evento de clic del botón de opción. En otras palabras, no tiene que hacer ninguna jQuery adicional, simplemente actualice su HTML.

aquí está en la acción - si tiene quemador, se puede ver claramente que $ (this) siempre se refiere a la <input>, independientemente de si está o no de hecho click en el correspondiente <label>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    $('input.quiz-button').click(function(event) 
    { 
    console.log($(this)); 
    }) 
}); 

</script> 

</head> 
<body> 
    <form id="test" name="tester"> 
    <input class="quiz-button" type="radio" name="answer1" id="answer1"/> 
    <label for="answer1">this is the text 1</label> 
    <input class="quiz-button" type="radio" name="answer2" id="answer2"/> 
    <label for="answer2">this is the text 2</label> 
    </form> 
</body> 
</html>

Fuente

2009-07-21 19:39:26

oh wow, no sabía esto. +1 –

Te mereces un +1 solo por el simple hecho de que Paolo no sabía de esto. @Paulo - Eres el Jon Skeet de jQuery :-) – ichiban

¡Gracias! Para ser justos, esto es algo de DOM Events, no algo de jQuery.Además, probablemente sea más exacto decir que "hacer clic en un' 'automáticamente distribuye un evento de clic desde su conexión' '- porque los elementos' 'en realidad envían un evento de clic distinto. Esto significa que al hacer clic en una etiqueta con un de hecho, la entrada despacha DOS eventos de clic casi simultáneos, con el envío de clic de la etiqueta primero. –

uno se puede topar con algún tipo de atravesar técnica para satisfacer sus necesidades, pero le recomiendo que utilice el <label> element lugar: no sólo es la forma semánticamente correcta de hacer esto, a continuación, puede añadir en el atributo for señalar de vuelta al campo de entrada es una etiqueta de:

<div class="answers"> 
    <span class="radiobutton> 
     <input type="radio" name="answer1" id="answer1"/> 
    </span> 
    <label class="answertextwrapper" for="answer1"> 
     this is the text 
    </label> 
</div>

Y entonces su Javascript puede tener este aspecto:

$("span.RadioButton").click(function(event) { 
    //... 
});

en cuenta que es mucho mejor anteponer el nombre de la etiqueta cuando está haciendo selectores de clase en Javascript (ver comentarios para más información). También eliminé el enlace vacío ya que hacerlo de esa manera también es una mala práctica. Simplemente debe agregar la declaración del cursor en su CSS en su lugar si desea que aparezca la mano.

Fuente

2009-07-21 19:29:10

¿Por qué es "mucho" mejor? ¿Solo por legibilidad o también hay un aumento en el rendimiento? – phairoh

Hay una _huge_ ganancia de rendimiento. Con un selector de clases, jQuery tiene que mirar CADA ELEMENTO INDIVIDUAL en el documento para ver si tiene la clase que está solicitando. Si hace span.classname, jQuery puede usar el getElementsByTagName nativo (y rápido) y THEN filtrar por nombre de clase. –

<div class="answers"> 
<label class="answertextwrapper"><input type="radio" name="answer1"/> this is the text</label> 
</div>

Esto funciona mejor para mí. De esta forma, ni siquiera necesita "conectar" la entrada a la etiqueta a través del para la propiedad en el elemento de la etiqueta .

Fuente

2009-07-22 12:41:03

Bellamente hecho. ¡No me di cuenta de que podría envolver botones de radio en una etiqueta como esta! –

JQuery Agregar evento de clic al texto de entrada de radio

Respuesta

Cuestiones relacionadas