Aktualizacja listy uzyskanej z querySelectorAll()

Question

Jak moge zaktualizować listę uzyskaną poprzez querySelectorAll() ? 

Część contentu na stronie pojawia sie po klikniecu pewnych elementwó za pomocą js/jQuery,

Niestety poniższy kod działą tylko dla załadowanych elementów, 

na elementy dodawane dynamicznie nie reaguje, 

 

var catalogs = document.querySelectorAll("[data-src]");
for (var catalog of catalogs) {
    $(catalog).on('click', function () {
        console.log(this);
        $.ajax({
            type: "GET",
            url: $(this).attr("data-src"),
            data: $(this).val(),
            success: function (data) {
                $($(catalog).attr("data-trg")).html(data);
            }
        });
    });
}

próbowałem juz stworzyc tablice i na niej działąć ale nie pomogło 

var catalogs = [];
catalogs= $("[data-src]");

for (var catalog of catalogs) {
    $(catalog).on('click', function () {
       catalogs= $("[data-src]");
        console.log(this);
        $.ajax({
            type: "GET",
            url: $(this).attr("data-src"),
            data: $(this).val(),
            success: function (data) {
                $($(catalog).attr("data-trg")).html(data);
            }
        });
    });
}

metody .push(), .add() też nie pomagają 

 

Jakieś pomysły? 

Comments

Ja bym wywołał na nowo zapytanie querySelectorAll.

---

w jaki sposób?

próbowałem catalogs = document.querySelectorAll("[data-src]");

Ale funkcja dalej nie reaguje,

 

Lista się aktualizuje, ale funkcja po kliknieciu w dany element nie reaguje,

Dodatkowo lista na elementy dodane, po klikniecu na nie, w konsoli zwraca:
Node cannot be found in the current page.

---

Na stacku piszą, aby użyć MutationObserve https://stackoverflow.com/questions/27224715/update-queryselectorall-nodelist-after-added-element-dynamically

---

Po co MutationObserver? O.o

Answer 1

Hasło-klucz: event delegation. Przypnij zdarzenie do elementu zawierającego elementy z [data-src], dzięki czemu będzie reagować na wszystko, co jest w tym nadrzędnym elemencie. PoC: https://jsfiddle.net/Comandeer/p3c6myL9/

Answer 2

querySelectorAll tworzy nam tzw. listę węzłów (NodeList). Spróbuj użyć operatora rest tak aby otrzymać tablicę a  na niej zamiast pętli for użyj forEach.

var catalogs = [...document.querySelectorAll("[data-src]")];

Po drugie querySelector nie aktualizuje zmiennej na bieżąco. Spróbuj zamiast niego użyć

.getElementsBy...