jQuery .on en event delegation

Ik heb iets nieuws geleerd. En omdat ik de beroerdste niet ben, deel ik het graag met je. Het betreft een dingetje binnen jQuery, jeweetwel, die taal, gebasseerd op javascript, die zo handig is voor webdesigners en makkelijk in het gebruik. Ten tijde van dit schrijven zijn we met jQuery aangeland bij versie 1.9.1, die je makkelijk kan toevoegen aan je projecten via de google hosted libraries. Wanneer de gebruiker op een button of link klikt wordt het “click” event getriggered. Dit handel je met jQuery af met de shortcut methode

$("#button").click(function(){
    wat er moet gebeuren als gebruiker op de knop klikt...
});

Let wel op, want het “click” event wordt aan de button of link vastgebonden (bind) op het moment dat de pagina geladen is (mits je de button binnen document.ready hebt zoals hier):

$(document).ready(function(){
    $("#button").click(function(){
       wat er moet gebeuren als gebruiker op de knop klikt...
    }); 
}) 

Dit vastbinden van het “click” event kan alleen als op dat moment het bijhorende html element (de button in dit geval) aanwezig is in de html code. Normaal gesproken geen probleem, maar stel nu eens dat je dynamisch html buttons genereert waaraan je dan een “click” event mbv jQuery wilt vastbinden. Dan kun je dat ook doen door het “click” event na toevoeging van de nieuwe html elementen ook vast te binden aan deze dynamisch gegenereerde elementen, maar er is een makkelijkere manier, leve jQuery!

Het “click” event vastbinden aan het html element (met de shortcut) staat eigenlijk voor:

$("#button").on("click", function(){
    wat er moet gebeuren...
});

En nu komt de grote truc van jQuery die bekend staat als event delegation: Je kunt de bovenstaande syntax gebruiken om eenvoudig en eenmalig het “click” event vast te binden aan nog niet bestaande html elementen (die later dynamisch gegenereerd worden) mits een van de parents van die elementen wel bestaat op moment van vastbinden. Stel dus eens dat we onderstaande 3 buttons hebben gemaakt met html:

en dat we hier later, dynamisch, nog 4 buttons aan toevoegen met text Klik 4, Klik 5 etc. Dan kun je eenvoudigweg het “click” event binden op de volgende manier:

$(document).ready(function(){
    $("#button_group")on("click", "button", function(event){
        alert( "Tekst op deze knop luidt: " + $(this).text() );
    }); 
}) 

Een klik op een van de knoppen geeft nu een alert box weer met daarin de tekst “Klik i”, met i=1,…,7 al naar gelang welke knop je geklikt hebt. Het werkt trouwens volgens mij niet als je de functie geen argument meegeeft, want dan refereert $(this) niet naar de button waar je op geklikt hebt.

Nou, ik hoop dat dit heeft geholpen, ik vond het nodig dit met je te delen omdat de tekst in de jQuery API, niet superduidelijk is imo. Een fijne dag verder!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! All posts
Alle berichten tonen van Pim Hooghiemstra

4 gedachten over “jQuery .on en event delegation

  1. George

    Dag Pim,

    erg goed uitgelegd 🙂 .. ben er blij mee .. best een gemis om af en toe een Nederlandse interpretatie / vertaling hierover te lezen, naar mijn idee zijn er te weinig artikelen hierover .. so keep on writing 😉 ..

    thanks!

    Reageren
      1. George

        Dag Pim, ik heb zeker nog een suggestie, ik zou graag willen zien hoe een jQuery plugin geschreven kan worden, welke OOP is geschreven met defaults, ik denk dat veel jongens dat interessant vinden. 🙂

        Reageren

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *