[JS] Problem z AddEventListener

Question

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

Comments

Używasz jquery więc bądź konsekwentny.

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

.addEventListener("click", function() -> .on('click' function(){...})

---

Masz rację. Lepiej być konsekwentnym. To jednak nie rozwiązuje problemu.

---

Dlatego napisałem w komentarzu. Nie mam czasu zajrzeć teraz do kodu. Sprawdź jaki  obiekt zdarzenie przekazywany jest do funkcji.

Answer 1

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').

Comments

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ł.

---

Cieszę się że mogłem pomóc ;)