Vanilla Javascript equivalent voor jQuery

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Vanilla Javascript equivalent voor jQuery

      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:

      Source Code

      1. $( document ).on( "evt", "elem", function(e) {
      2. });
      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?


      Source Code

      1. document.querySelector("elem").addEventListener("evt", function(e){
      2. });
      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:


      Source Code

      1. const on = (el, evt, sel, handler) => {
      2. el.addEventListener(evt, function(event) {
      3. var t = event.target;
      4. while (t && t !== this) {
      5. if (t.matches(sel)) {
      6. handler.call(t, event);
      7. }
      8. t = t.parentNode;
      9. }
      10. });
      11. }
      12. on(document, 'submit', 'form.ajaxForm', function(e) {
      13. });
      Display All

      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
      MiCa - Basketbal <3

      The post was edited 2 times, last by MiCa ().

    • FangorN wrote:

      Wat is er mis met jQuery though? Deze lib helpt je ook met cross browser compatibiliteit etc.
      Vanwaar de aversie voor jQuery?
      Experimenteren en kijken of ik eventueel geen klein js frameworkje kan schrijven op voorbereiding voor bootstrao 5 projecten. Ga zeker jQuery niet verwaarlozen, beetje onmogelijk althans voor de nabije toekomst. Enorm benieuwd ook naar verdere ontwikkelingen in jQuery zelf ben althans enorm bli dat support enorm is online en het core team blijft streven naar betere versies!
      MiCa - Basketbal <3

    • FangorN wrote:

      Wat is er mis met jQuery though? Deze lib helpt je ook met cross browser compatibiliteit etc.
      Vanwaar de aversie voor jQuery?
      jQuery heeft ons allemaal opgevoed en heeft Javascript naar een hoger niveau gebracht, maar helaas zijn er nu zo veel legacy projecten waarvan libraries niet meer up to date gehouden worden dat er onmogelijke situaties voordoen, vaak waar bepaalde functionaliteit gewoonweg niet meer werkt door verschillende browsers en versie conflicten. Ik heb jaren met zo een legacy project gewerkt, wat je constant doet is jQuery vervangen met plain javascript waarna het volgende jQuery probleem zich al aanbied. Ik volg nu de standaarden van Ecmascript en maintainability is daarmee voor mij enorm vereenvoudigd. Plain javascript, is a bliss.

      ps. over frameworks gesproken, probeer je eens te verdiepen in Vue, je wil daarna niet meer terug naar jQuery.

    • Maar alle software heeft een houdbaarheidsdatum en is onderhevig aan veroudering.

      Indien projecten niet worden bijgewerkt en op den duur niet meer werken kun je niet echt de schuld (uitsluitend) in de schoenen schuiven van de gebruikte techniek(en), de oorzaak daarvan ligt dan toch echt ergens anders ;).

      (edit: ah, ik zie wat je bedoelt, aanverwante libs die gebruik maken van jQuery maar op een gegeven moment niet meer compatibel zijn, maar dat is in zekere zin nog steeds een onderhoudsprobleem, en niet zozeer een inherent jQuery-probleem; het creëert natuurlijk wel een afhankelijkheid en die kan onhandig zijn inderdaad; streven naar minder afhankelijkheid is meestal goed)

      Neemt niet weg dat je best je horizon mag verbreden, jQuery is een oplossing, en niet per definitie dé oplossing.