Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> onClick przypisane do label z checkboxem wywołuje się dwa razy, jQuery, checkbox
sabat24
post 28.04.2018, 13:32:42
Post #1





Grupa: Zarejestrowani
Postów: 152
Pomógł: 24
Dołączył: 13.09.2007

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


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.

Ten post edytował sabat24 28.04.2018, 13:46:41
Go to the top of the page
+Quote Post
trueblue
post 28.04.2018, 13:48:38
Post #2





Grupa: Zarejestrowani
Postów: 5 106
Pomógł: 1420
Dołączył: 11.03.2014

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


  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ąć?

Ten post edytował trueblue 28.04.2018, 13:54:07
Go to the top of the page
+Quote Post
sabat24
post 28.04.2018, 13:58:50
Post #3





Grupa: Zarejestrowani
Postów: 152
Pomógł: 24
Dołączył: 13.09.2007

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


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.

Ten post edytował sabat24 28.04.2018, 13:59:48
Go to the top of the page
+Quote Post
trueblue
post 28.04.2018, 14:15:03
Post #4





Grupa: Zarejestrowani
Postów: 5 106
Pomógł: 1420
Dołączył: 11.03.2014

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


Bardzo możliwe, że można to osiągnąć poprzez tzw. checkbox hack, dlatego pytałem.
https://css-tricks.com/almanac/selectors/c/checked/
Go to the top of the page
+Quote Post
sabat24
post 28.04.2018, 14:23:28
Post #5





Grupa: Zarejestrowani
Postów: 152
Pomógł: 24
Dołączył: 13.09.2007

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


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.
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 18.07.2018 - 21:39