Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: onClick przypisane do label z checkboxem wywołuje się dwa razy
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
sabat24
Kod HTML wygląda tak:

  1. kliknij tu
  2. <input name="a" value="1" autocomplete="off" type="checkbox">


JS mam następujący:

  1. $(function() {
  2. $('label').on('click', function() {
  3. alert('click');
  4. });
  5. });


Całość dostępna tutaj -> https://jsfiddle.net/pppxenfb/

Po kliknięciu w napis: kliknij tu, alert wyskakuje dwa razy. Drugim razem zapewne jak checkbox się zaznaczy / odznaczy. Jak można przypisać w takim razie do takiego labela, tylko jedno zdarzenie, zakładając, że nie chcę zmieniać struktury z użyciem "for" oraz ID.
trueblue
  1. $('label input').on('click', function(e) {
  2. e.stopPropagation();
  3. });
  4. $('label').on('click', function() {
  5. alert('click');
  6. });

Możesz wyjaśnić jaki cel chcesz osiągnąć?
sabat24
Próbowałem tak, ale wtedy domyślnie nie zaznacza mi checkboxa. Zapewne dałoby się to obejść przez $(this).find('input').prop('checked', true); tylko wtedy sens wrapowania tego labelem zniknąłby.

Edited: Powyższe dotyczyło kodu sprzed Twojej edycji.

Co do celowości. Odziedziczyłem kod, w którym label ma jeszcze 2 potomków i są to elementy <img>, a input jest ukryty. Jest to więc forma checkboxa zastąpionego obrazkami. Kliknięcie na label miało zaznaczać checkboxa, by następnie wysłany formularz zawierał odpowiednie elementy. Dodatkowo onClick, miał powodować dodatkowe zaznaczanie i odnzaczanie innych elementów.

Tyle, że własnie pisząc Ci odpowiedź, uświadomiłem sobie, że to zostało zrobione bezsensu. Zdarzenie, które teraz jest przypięte do onclick, powinno zostać zmienione do onChange inputa i wszystko powinno działać poprawnie.
trueblue
Bardzo możliwe, że można to osiągnąć poprzez tzw. checkbox hack, dlatego pytałem.
https://css-tricks.com/almanac/selectors/c/checked/
sabat24
Myślałem o tym i jeśli chodzi o sam fakt zmiany obrazka, tak byłoby najlepiej, gdyby to było zrobione. Aczkolwiek wykonywane są jeszcze dodatkowe sprawdzenia w samym JS, więc i tak się nie obejdzie bez dodatkowego kodu. Przerzucenie zdarzenia na change inputa załatwiło sprawę. W każdym razie dzięki za pomoc, bo sobie uświadomiłem w czym leży problem.
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.
Invision Power Board © 2001-2024 Invision Power Services, Inc.