Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] $('label').click() wywołuje dwukrotnie callback, bug jQuery, albo ja czegoś nie wiem...
sowiq
post
Post #1





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Kiedyś miałem już ten problem, ale obszedłem go trochę inaczej i dałem sobie spokój. Teraz temat powrócił, ale pytam bardziej z ciekawości, bo sytuacja jest dla mnie trochę nielogiczna.

Mam prościutki kod HTML:
[HTML] pobierz, plaintext 
  1. <form action="#" method="post">
  2. 	<label><input type="radio" name="test" value="1" /> test label (click here)</label><br />
  3. 	<input id="inp2" type="radio" name="test" value="1" /> Another input without label
  4. </form>
[HTML] pobierz, plaintext


A do niego podpięty równie prosty kod JS:
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function(){
  2. 	$('label').click( function(){
  3. 		alert('1');
  4. 	});
  5. 	$('#inp2').click( function(){
  6. 		alert('2');
  7. 	});
  8. });
[JAVASCRIPT] pobierz, plaintext

W działaniu wygląda to tak.

I teraz tak:
- po kliknięciu w pierwsze pole radio pokazuje się alert: 1 - OK.
- po kliknięciu w drugie pole radio pokazuje się alert: 2 - też OK.
- po kliknięciu na napis test label (click here) również pokazuje się alert: 1, ale dwukrotnie. Moje pytanie brzmi - dlaczego tak się dzieje?

Dla bardziej dociekliwych dodam, że change( callback ) nie przyda mi się ze względu na to, że pod IE callback jest wykonywany dopiero w momencie zdjęcia focusa z pola radio.

Ten post edytował sowiq 28.08.2009, 01:26:35
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
f1xer
post
Post #2





Grupa: Zarejestrowani
Postów: 403
Pomógł: 68
Dołączył: 20.03.2008

Ostrzeżenie: (0%)
-----

wydaje mi się że to poprawne działanie ponieważ, jak można zauważyć użycie w formularzu label nawet, bez użycia JS powoduje że po kliknięciu w etykietę zaznacza nam się również checkbox, który jest dzieckiem tej etykiety. Inaczej mówiąc wykonują się 2 zdarzenia click. To tylko moja teoria na jej poparcie mam taki oto dowód smile.gif Na twoim przykładzie klikam w label wyskakuje alert ale checkbox NIE JEST ZAZNACZONY kliknę ok w alercie, checkbox się zaznacza i znów alert, ale jeżeli kliknę bezpośrednio w checkbox (nie w etykietę) wówczas alert wykona się tylko raz. Nie mam daru tłumaczenia ale myślę że rozumiesz o co mi chodzi smile.gif

edit:
Co ciekawe taka konstrukcja działa już poprawnie:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  2.    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4.  
  5. <head>
  6.     <title>cosik</title>
  7.     <meta http-equiv="content-type" 
  8.         content="text/html;charset=utf-8" />
  9.     <meta http-equiv="Content-Style-Type" content="text/css" />
  10.     <script src="jquery-1.3.2.js" type="text/javascript"></script>
  11.     <script type="text/javascript">
  12.       $(document).ready(function(){
  13.     $('label').click( function(){
  14.         alert('1');
  15.     });
  16.     $('#inp2').click( function(){
  17.         alert('2');
  18.     });
  19. });
  20.     </script>
  21. </head>
  22.  
  23. <body>
  24. <form action="#" method="post">
  25. <fieldset>
  26.     <legend>pola tekstowe</legend>
  27.     <label for="test">test label (click here)</label><input type="radio" name="test" id="test" value="1" /><br />
  28.     <input id="inp2" type="radio" name="test" value="1" /> Another input without label
  29.     </fieldset>
  30. </form>
  31. </body>
  32. </html>
[HTML] pobierz, plaintext


Przepraszam za chaotyczny styl, ale aż musiałem oderwać się od projektu żeby się tym pobawić smile.gif

Ten post edytował f1xer 28.08.2009, 01:49:45


--------------------
Pomogłem? wyraź to i kliknij "Pomógł"
Go to the top of the page
+Quote Post
sowiq
post
Post #3





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Cytat(f1xer @ 28.08.2009, 02:39:18 ) *
wydaje mi się że to poprawne działanie ponieważ, jak można zauważyć użycie w formularzu label nawet, bez użycia JS powoduje że po kliknięciu w etykietę zaznacza nam się również checkbox, który jest dzieckiem tej etykiety.
Wszystko ładnie, pięknie, ale pierwsze pole radio nie ma przypisanego zdarzenia onclick smile.gif

Jeśli zrobię sobie tak:
[HTML] pobierz, plaintext 
  1. <div><span></span></div>
[HTML] pobierz, plaintext
oraz: 
[JAVASCRIPT] pobierz, plaintext 
  1. $('div').click( function(){ alert(''); });
[JAVASCRIPT] pobierz, plaintext
to idąc Twoim tokiem rozumowania alert również powinien pokazać się dwa razy, a tak się nie dzieje. Musiałbym przypisać zdarzenie również do elementu <span />.

Chyba że pole <label /> działa tak, że po kliknięciu w nie przeglądarka sama wywołuje akcję kliknięcia na elemencie w środku, bo programistom było łatwiej (bo np. taka akcja była już oprogramowana).
Go to the top of the page
+Quote Post
wookieb
post
Post #4





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk




 
[HTML] pobierz, plaintext 
  1. $('label').click( function(){
  2. 		alert('1');
  3. return false;
  4. 	});
[HTML] pobierz, plaintext
A dlaczego tak się dzieje to dokladnie nie wiem. Prawdopodobnie chodzi o bąbelkowanie eventów.

Ten post edytował wookieb 28.08.2009, 08:31:37


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
sowiq
post
Post #5





Grupa: Zarejestrowani
Postów: 1 890
Pomógł: 339
Dołączył: 14.12.2006
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Cytat(wookieb @ 28.08.2009, 09:30:53 ) *
Prawdopodobnie chodzi o bąbelkowanie eventów.
Cały szkopuł polega na tym, że takie zachowanie można zaobserwować tylko dla <label />. Dodałem dla przykładu <div /> z dwoma <span /> wewnątrz. Pierwszy <span /> nie ma przypisanej akcji, więc po kliknięciu wyświetla się tylko jeden alert. Identycznie powinno być w przypadku pierwszego pola radio.

http://sowiq.net/jquery/
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 23:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn