PFZ.nl - PHP Community: [jquery] Alternatief voor live() functie? - Frontend - Forum - PFZ.nl - PHP Community

Hoi allen,

Hier even een vraagje al jullie experts m.b.t. best practices.

Regelmatig gebruik ik jquery in mijn projecten.
Tegenwoordig worden de sites die ik maak steeds meer 'HTML5 achtig' door combinaties van daadwerkelijke HTML5 tags maar ook door het gebruik van javascript/jquery en css3. Nog even en er komt geen harde page reload meer aan te pas, hartstikke leuk.

Vooral door het gebruik van ajax, waarmee ik verschillende onderdelen van een website steeds bijwerk zonder een pagina opnieuw te laden, loop ik regelmatig tegen iets aan waarvan ik denk dat het beter kan. Dat wil ik graag aan jullie voorleggen.

Stel het volgende:
- met behulp ajax call stop je nieuwsberichten in een div container (waar eerst iets anders stond)
- zo'n nieuwsbericht bestaat, laten we zeggen, uit een titel, en een 'lees meer' link.
- bij het klikken op zo'n lees meer link wordt er een andere div bijgewerkt waar de inhoud van het nieuwsbericht wordt getoond.

Bijvoorbeeld, heel simpel opzetje:

1 2 3 4 5

<div id="nieuws"> <h2>Dit is een titel</h2> <a href="#">Lees meer</a> ... etc </div>

Als je nu in je javascript het volgende doet gaat het mis (onderstaande click wordt niet uitgevoerd):

1	$('#nieuws > a').click(function() { .... })

Want, die nieuws div is in de dom tree gezet nadat de javascript al is ingeladen.

Dus heb ik ooit eens het volgende gevonden, wat wel werkt:

1	$('#nieuws > a').live('click', function() { ... })

http://api.jquery.com/live/
(vanaf 1.7 gebruik je overigens on(), maar dat even terzijde).

Mijn vraag is: voor een case als bovenstaande, is er een alternatieve manier?
Het is natuurlijk gemakkelijk om alles met zo'n live() of on() functie te doen, maar als dat de beste manier zou zijn, waarom is bij jquery dan niet ieder event gewoon 'live'/'on'?
Nu zit je tevens, naarmate sites groter worden, met enorme js files met code die nooit zal worden uitgevoerd.
Uiteraard is bovenstaande slechts een zeer simpel voorbeeld.

Hoe lossen jullie dit op?

in jquery < 1.7 zou je beter naar delegate() kunnen kijken:

1	$('#nieuws').delegate('a', 'click', function() {});

daarmee is er maar 1 element (#nieuws) waar op gelet moet worden door js, wat zeker bij een flinke berg a-tjes in het nieuws zou schelen in geheugengebruik

http://api.jquery.com/delegate/

Ik luister altijd naar het click event op het document object:

1 2 3 4 5 6

$(document).click(function(e) { var $target = $(e.target).closest('a'); if ($target && $target.attr('href')) { ..... } });

Vervolgens kijk ik a.d.h.v. de class op het a element of waar het element in de dom staat wat er mee moet gebeuren.