• 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
175 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 (91,470 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 (91,470 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 Dyskutant (8,620 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 Dyskutant (8,620 p.)
Cieszę się że mogłem pomóc ;)

Podobne pytania

0 głosów
1 odpowiedź 104 wizyt
0 głosów
0 odpowiedzi 88 wizyt
pytanie zadane 11 lutego 2017 w JavaScript, jQuery, AJAX przez mowmiheniek Stary wyjadacz (11,920 p.)
0 głosów
1 odpowiedź 64 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

63,336 zapytań

109,595 odpowiedzi

228,945 komentarzy

44,065 pasjonatów

Przeglądających: 243
Pasjonatów: 12 Gości: 231

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.

...