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!