Forum PHP.pl > [jQuery] $('label').click() wywołuje dwukrotnie callback

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery] $('label').click() wywołuje dwukrotnie callback

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

sowiq

28.08.2009, 00:55:57

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 
<form action="#" method="post">
	<label><input type="radio" name="test" value="1" /> test label (click here)</label><br />
	<input id="inp2" type="radio" name="test" value="1" /> Another input without label
</form>
[HTML] pobierz, plaintext

A do niego podpięty równie prosty kod JS:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
	$('label').click( function(){
		alert('1');
	});
	$('#inp2').click( function(){
		alert('2');
	});
});
[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.

f1xer

28.08.2009, 01: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. Inaczej mówiąc wykonują się 2 zdarzenia click. To tylko moja teoria na jej poparcie mam taki oto dowód

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

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

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
 
<head>
    <title>cosik</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <script src="jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
    $('label').click( function(){
        alert('1');
    });
    $('#inp2').click( function(){
        alert('2');
    });
});
    </script>
</head>
 
<body>
<form action="#" method="post">
<fieldset>
    <legend>pola tekstowe</legend>
    <label for="test">test label (click here)</label><input type="radio" name="test" id="test" value="1" /><br />
    <input id="inp2" type="radio" name="test" value="1" /> Another input without label
    </fieldset>
</form>
</body>
</html>
[HTML] pobierz, plaintext

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

sowiq

28.08.2009, 08:13:04

Cytat(f1xer @ 28.08.2009, 02:39:18 )

Wszystko ładnie, pięknie, ale pierwsze pole radio nie ma przypisanego zdarzenia onclick

Jeśli zrobię sobie tak:

[HTML] pobierz, plaintext 
<div><span></span></div>
[HTML] pobierz, plaintext

oraz:

[JAVASCRIPT] pobierz, plaintext 
$('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).

wookieb

28.08.2009, 08:30:53

[HTML] pobierz, plaintext 
$('label').click( function(){
		alert('1');
return false;
	});
[HTML] pobierz, plaintext

A dlaczego tak się dzieje to dokladnie nie wiem. Prawdopodobnie chodzi o bąbelkowanie eventów.

sowiq

28.08.2009, 09:08:05

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/

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.