Zdarzenie On Click nie działa po załadowaniu elementu przez ajax

Question

Witam wykonuje pewna akcje przy użyciu ajaxa :

document.querySelectorAll('.ajax-link').forEach(function (item) {
        item.addEventListener('click', function (e) {
            e.preventDefault();
            //jakas akcja przy użyciu ajaxa
        });
});

Wszystko fajnie pobiera lecz po załadowaniu danych ajaxem i kliknieciu na daną klasę nie pobiera mi tych elementów załadowanych ajaxem. W jquery rozwiązaniem tego problemu było coś takiego :

$('body').on('click', '.ajax-link', function(e) {
       e.preventDefault();
       //jakas akcja przy użyciu ajaxa
});

Teraz pytanie jak zrobić  coś takiego w czystym javascript ?

Comments

Odpowiedź już dostałeś. Ja dopowiem, że Twój kod z użyciem querySelectorAll + forEach na zwróconej kolekcji nie obejmuje nowych elementów pobranych przez Ajax, ponieważ querySelectorAll zwraca statyczną kolekcję, czyli taką która znajduje się w DOM w momencie jej odczytu/szukania. Twój kod powinien działać z użyciem document.getElementsByClassName, ponieważ ona zwraca żywą listę node'ów, czyli taką którą aktualizuje się, gdy zmieniasz coś w DOM nawet po użyciu tej metody.

Answer 1

Poczytaj o event delegation

Comments

Dzięki zrobiłem coś takiego:

body.addEventListener('click', function (e) {
        e.preventDefault();
        if (e.target.classList.contains("ajax-link")){
                 //jakas akcja
        }
});

i działa :)

---

To fajnie, że zrozumiałeś, to przydatna technika :)