jQuery live events en re-binding - jun 1
Onze nieuwe webapplicatie Solidshops.com wordt gebouwd met redelijk wat jQuery onder de motorkap. Onlangs constateerden we daar een klein probleempje bij het toevoegen van elementen aan de pagina nadat deze al volledig was geladen. Het bleek namelijk niet zomaar mogelijk een muisklik op te vangen op elementen die via jQuery achteraf on-the-fly waren aangemaakt op onze pagina’s.
jQuery Event Binding
Via onderstaande jQuery-code kunnen we alle mouseclicks opvangen die gebeuren op links met klasse ajax_delete_cat (class="ajax_delete_cat").
$("a.ajax_delete_cat").click(function () {
//code om uit te voeren na klik op een link met klasse ajax_delete_cat
});
Dat werkt prima, zolang deze links in de pagina worden opgeladen, waarna jQuery via bovenstaand codevoorbeeld het click-event zal binden aan al deze links. jQuery heeft echter geen weet van links die we achteraf nog gaan toevoegen, maar waar we eveneens diezelfde click op willen opvangen.
Kortom: jQuery voert haar code uit zodra de hele pagina is ingeladen. Op dat moment wordt het click-event gebonden aan alle links met klasse “ajax_delete_cat”.
Prima dus, behalve voor eventuele toekomstige links die door jQuery toegevoegd worden nadat de pagina reeds geladen is. jQuery gaat dus niet vanzelf click events binden aan toekomstige elementen, enkel aan elementen die reeds bestaan op het moment dat jQuery wordt uitgevoerd.
jQuery Event Re-Binding
Om dit probleempje op te lossen zouden we eigenlijk alle click-events terug moeten kunnen binden aan onze links, zodra een nieuwe link via jQuery werd toegevoegd. Dit opnieuw binden van de events noemt men Event Re-Binding. Sinds jQuery 1.3 bestaat er echter een veel gemakkelijkere manier om het aangekaarte probleem op te lossen.
Hello jQuery live events
Via enkele omwegen vonden we op de jQuery website wat we nodig hadden: live events!
Let op het subtiel verschil met onze oorspronkelijke code. Onderstaand codevoorbeeld zal ervoor zorgen dat alle huidige links met klasse ajax_delete_cat, alsook toekomstige links met deze klasse een click-event zullen kennen.
$("a.ajax_delete_cat").live("click", function () {
//code om uit te voeren na klik op een link met klasse ajax_delete_cat
});
Thanks jQuery, works like a charm!
5 commentaren geserveerd
worship @ jquery :-)
Dit ging voorheen met de livequery plugin
Yep, vroeger was het met de livequery plugin te doen. Jammergenoeg ondersteunt live (nog) niet elke javascript event (blur bijvoorbeeld niet).
Wat ook super zou voor een toekomstige versie van van jQuery is de live-ondersteuning van custom events of plugin events…
jQuery 1.4 is uit en ondersteunt nu alle events live!