Beste leden,
Het internet afgelopen dagen al aardig wat zitten doorzoeken en al veel jquery kunnen ombouwen.
Loop helaas vast bij 1 bepaalde jquery call:
$( document ).on( "evt", "elem", function(e) {
});Dit stukje jQuery luistert naar alle 'evt' events op het element 'elem' OOK wanneer er nieuwe content met dezelfde evt listener werd ingeladen na de initiële pageload.
Met vanilla javascript zou dit de oplossing moeten zijn volgens enkele bronnen maar helaas werkt het alleen voor alle het eerste elementen reeds aanwezig in de initiële pageload verder zal het geen rekening meer houden met nieuwe dynamisch ingeladen inhoud. Iemand die hiervoor een oplossing kent?
document.querySelector("elem").addEventListener("evt", function(e){
});Om meerdere listeners op 1 evt en element te bekomen dien je querySelectorAll te gebruiken en dan de .forEach()
Ook al verschillende helper stukjes code geprobeerd zoals deze zonder succes helaas:
const on = (el, evt, sel, handler) => {
el.addEventListener(evt, function(event) {
var t = event.target;
while (t && t !== this) {
if (t.matches(sel)) {
handler.call(t, event);
}
t = t.parentNode;
}
});
}
on(document, 'submit', 'form.ajaxForm', function(e) {
});
Uiteindelijke doel:
Alle dynamisch ingeladen inhoud met eerder gespecifieerde evt listeners via jQuery werkend kunnen krijgen zonder jQuery en zonder de evt listener zelf te moeten her-initialiseren na dynamische inhoud in te laden. Werkt uitstekend met de lijntjes in het eerste code blokje maar dan ook incl jQuery lib.
Alvast bedankt en vriendelijke groeten
Michael
