• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[JS] Problem z AddEventListener

0 głosów
196 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez Wisien Nowicjusz (170 p.)
edycja 19 czerwca 2018 przez Wisien

Witam!

Postanowiłem do kodu końcowego z odcinka 5 kursu JS Pana Mirosława Zelenta dodać możliwość wybrania dowolnej ilości par kart na planszy. Objaw błędu jest następujący: po wyświetleniu strony w przeglądarce i wybraniu rozmiaru planszy karty nie reagują na kliknięcie (zupełnie jakby nasłuchiwanie kliknięcia nie zostało dodane), a konsola nie wyświetla błędów. Stąd uważam, że problem jest w tym fragmencie kodu: 

for (var i = 0; i < cardsAmount; i++)
    {
        $('.board').html($('.board').html() + '<div class="card" id="c' + i + '"></div> '); //dodawanie kart na planszę
        cardTab.push(document.getElementById('c' + i )); //dodawanie obiektu karty do tablicy
        cardTab[i].addEventListener("click", function() { revealCard(i); }); //nasłuchiwanie karty
    }

cardsAmount - liczba kart przekazywana do funkcji budującej planszę (roboczo onclick'iem)

Czy ktoś jest w stanie powiedzieć mi gdzie popełniam błąd/dać inny pomysł na zrealizowanie nasłuchiwania kliknięcia karty.

Pełny kod: https://pastebin.com/HHgcuXFE

komentarz 19 czerwca 2018 przez pablop76 Szeryf (96,690 p.)
Używasz jquery więc bądź konsekwentny.

document.getElementById('c' + i )   -> $( '#c' + i )

.addEventListener("click", function() -> .on('click' function(){...})
komentarz 19 czerwca 2018 przez Wisien Nowicjusz (170 p.)
Masz rację. Lepiej być konsekwentnym. To jednak nie rozwiązuje problemu.
komentarz 19 czerwca 2018 przez pablop76 Szeryf (96,690 p.)
Dlatego napisałem w komentarzu. Nie mam czasu zajrzeć teraz do kodu. Sprawdź jaki  obiekt zdarzenie przekazywany jest do funkcji.

1 odpowiedź

+1 głos
odpowiedź 19 czerwca 2018 przez cz3ran Stary wyjadacz (11,720 p.)
wybrane 19 czerwca 2018 przez JSHolic
 
Najlepsza

Prawdopodobnie elementy, do których chcesz podpiąć listenery generowane są dynamicznie (z poziomu JS), więc nie podepniesz do nich listenerów. Spróbuj podpiąć eventlistener pod document i na evencie sprawdzaj czy kliknięty element posiada Twoją klasę/id. W czystym JS bedzie to mniej więcej wyglądało następująco:

document.addEventListener('click', (e) => {
    if (e.target && e.target.id== 'twójID') {
        // wykonaj akcję
    }
}

Jeżeli chcesz sprawdzić klasę to wtedy e.target.classList.contains('twoja_klasa').

komentarz 19 czerwca 2018 przez Wisien Nowicjusz (170 p.)
Wielkie dzięki! Gdybyś nie powiedział mi, że do elementów dynamicznych nie da się podpiąć listenerów to siedział bym nad tym jeszcze kilka dni po których bym się poddał.
komentarz 20 czerwca 2018 przez cz3ran Stary wyjadacz (11,720 p.)
Cieszę się że mogłem pomóc ;)

Podobne pytania

0 głosów
1 odpowiedź 107 wizyt
0 głosów
0 odpowiedzi 93 wizyt
pytanie zadane 11 lutego 2017 w JavaScript, jQuery, AJAX przez mowmiheniek Stary wyjadacz (11,920 p.)
0 głosów
1 odpowiedź 73 wizyt
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

65,755 zapytań

112,393 odpowiedzi

237,322 komentarzy

46,700 pasjonatów

Przeglądających: 156
Pasjonatów: 4 Gości: 152

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...