JQuery Ajouter un événement de clic au texte d'entrée de la radio

Je voudrais que l'étiquette soit associée à un bouton radio «chaud». J'ai commencé à l'implémenter en utilisant la méthode .siblings(). Je pense qu'il doit y avoir un meilleur moyen. L'événement click sur le bouton radio ressemble à ceci:JQuery Ajouter un événement de clic au texte d'entrée de la radio

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

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

Cela fonctionne très bien. Je voudrais que le même code s'exécute lorsque l'utilisateur clique sur l'étiquette de texte accompagnant le bouton radio. Le html ressemble à ceci:

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

Ceci est simplifié mais c'est proche. Ce que je veux, c'est capturer l'événement click sur l'élément avec class = "answertextwrapper", c'est-à-dire $ (". Answerwrapper") click

Je dois donc référencer l'entrée quand on clique sur le texte. Avoir du sens?

Des idées?

Source

2009-07-21 Nick

Simple, utiliser réel label elements; Lorsque vous les utilisez, vous bénéficiez non seulement d'une excellente convivialité, mais leur événement click est lié à l'événement click du bouton radio. En d'autres termes, vous n'avez pas à faire d'autres jQuery, il suffit de mettre à jour votre code HTML.

Ici, il est en action - si vous avez Firebug vous pouvez voir clairement que $ (ce) fait toujours référence à la <input>, peu importe si oui ou non vous avez réellement cliquez sur le <label> correspondant

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

Source

2009-07-21 19:39:26

oh wow, je ne le savais pas. +1 –

Vous méritez un +1 juste pour le simple fait que Paolo n'était pas au courant. @Paulo - Vous êtes le Jon Skeet de jQuery :-) – ichiban

Merci! Pour être juste, c'est une chose DOM Events, pas une chose jQuery.En outre, il est probablement plus exact de dire que "cliquer sur un " envoie automatiquement un événement click à partir de son "" connecté - car les éléments "" envoient réellement un événement click distinct. L'entrée input distribue DEUX événements de clics presque simultanés, avec la répartition des clics de l'étiquette en premier –

Vous pouvez trouver une sorte de technique de déplacement en fonction de vos besoins, mais je vous recommande d'utiliser le <label> element à la place: non seulement c'est la manière sémantiquement correcte de le faire, mais vous pouvez ajouter l'attribut for revenir à la zone de saisie est une étiquette 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>

Et puis votre Javascript peut ressembler à ceci:

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

Notez qu'il est beaucoup mieux PREPEND le nom de la balise lorsque vous faites des sélecteurs de classe en Javascript (voir les commentaires pour en savoir plus). J'ai également enlevé le lien vide, le faire de cette façon est également une mauvaise pratique. Vous devriez juste ajouter la déclaration de curseur dans votre CSS à la place si vous voulez que la main monte.

Source

2009-07-21 19:29:10

Pourquoi est-ce "beaucoup" mieux? Juste pour la lisibilité ou y a-t-il aussi une augmentation de performance? – phairoh

Il y a un gain de performance _huge_. Avec un sélecteur de classes, jQuery doit regarder CHAQUE ÉLÉMENT SIMPLE dans le document pour voir s'il a la classe que vous demandez. Si vous faites span.classname, jQuery peut utiliser le getElementsByTagName natif (et rapide) et THEN filtrer par nom de classe. –

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

Cela fonctionne le mieux pour moi. De cette façon, vous n'avez même pas besoin de "connecter" l'entrée à l'étiquette via pour la propriété dans étiquette élément.

Source

2009-07-22 12:41:03

Magnifiquement réalisé. Je n'avais pas réalisé que vous pouviez envelopper des boutons radio dans une étiquette comme celle-ci! –

JQuery Ajouter un événement de clic au texte d'entrée de la radio

Répondre

Questions connexes