JQuery Dodaj zdarzenie kliknięcia do tekstu wprowadzania radia

Chciałbym, aby etykieta powiązana z przyciskiem radiowym była "gorąca". Zacząłem wdrażać to za pomocą metody .siblings(). Myślę, że musi być lepszy sposób. Zdarzenie kliknięcia na przycisku opcji wygląda tak:JQuery Dodaj zdarzenie kliknięcia do tekstu wprowadzania radia

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

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

Działa to świetnie. Chciałbym, aby ten sam kod został wykonany, gdy użytkownik kliknie etykietę tekstową dołączoną do przycisku opcji. Wygląda on tak:

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

Jest to uproszczone, ale jest już blisko. Potrzebuję przechwycić zdarzenie click na elemencie class = "answerertrapwrapper", czyli $ ("answererwrapper"), kliknij

Muszę więc jakoś odnieść się do danych wejściowych po kliknięciu tekstu. Ma sens?

Wszelkie pomysły?

Źródło

2009-07-21 Nick

Proste, użyj rzeczywistego label elements;

Korzystając z nich, nie tylko zyskujesz dobrą użyteczność, ale zdarzenie kliknięcia jest powiązane z kliknięciem przycisku radiowego. In otherwords, nie musisz wykonywać żadnych dodatkowych jQuery, tylko zaktualizuj swój HTML.

Oto ona w akcji - jeśli masz Firebug można wyraźnie zobaczyć, że $ (this) odnosi się zawsze do <input>, niezależnie od tego, czy rzeczywiście kliknij na odpowiedni <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>

Źródło

2009-07-21 19:39:26

oh wow, nie wiedziałem tego. +1 –

Zasługujesz na +1 tylko z tego prostego faktu, że Paolo o tym nie wiedział. @Paulo - Jesteś Jon Skeet z jQuery :-) – ichiban

Dzięki! Aby być uczciwym, jest to rzecz wydarzenie DOM, nie rzecz jQuery.Ponadto, prawdopodobnie dokładniej jest powiedzieć, że "kliknięcie na' 'automatycznie wywołuje zdarzenie click z podłączonego' '- ponieważ' 'elementy faktycznie wywołują zdarzenie click click. Oznacza to, że kliknięcie etykiety z połączonym input faktycznie wywołuje DWU niemal jednoczesne zdarzenia kliknięcia, najpierw wysyłając etykietę z kliknięciami –

Możesz wymyślić jakąś technikę przechodzenia do swoich potrzeb, ale polecam zamiast tego użyć <label> element: nie tylko jest to semantycznie poprawny sposób robienia tego, ale możesz dodać atrybut for do punktu go z powrotem do pola wejściowego jest etykieta:

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

I wtedy twój JavaScript może wyglądać następująco:

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

Należy pamiętać, że jest to znacznie lepiej poprzedzić nazwa znacznika, gdy robisz selektory klas w JavaScript (zobacz komentarze dla więcej). Usunąłem również puste łącze, ponieważ wykonywanie tej czynności jest również złą praktyką. Powinieneś po prostu dodać deklarację kursora do swojego CSS, jeśli chcesz, aby ręka pojawiła się.

Źródło

2009-07-21 19:29:10

Dlaczego jest "dużo" lepszy? Tylko dla czytelności, czy też jest wzrost wydajności? – phairoh

Występuje ogromny wzrost wydajności. Za pomocą selektora klasy jQuery musi przejrzeć KAŻDY POJEDYNCZY ELEMENT w dokumencie, aby sprawdzić, czy ma klasę, o którą prosisz. Jeśli robisz span.classname, jQuery może używać natywnej (i szybkiej) metody getElementsByTagName, a THEN odfiltrować według nazwy klasy. –

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

To działa najlepiej dla mnie. W ten sposób nie trzeba nawet "łączyć" danych wejściowych z etykietą za pomocą dla elementu w elemencie etykieta.

Źródło

2009-07-22 12:41:03

Pięknie zrobione. Nie wiedziałem, że możesz zapiąć przyciski radiowe w takiej etykiecie! –

JQuery Dodaj zdarzenie kliknięcia do tekstu wprowadzania radia

Odpowiedz

Powiązane problemy