[jquery] OOP click event

[xzaz]

Ik probeer een click event bij een object te houden; met andere woorden, het event moet alleen gelden voor dat object.

Ter verduidelijking:

JavaScript:

if (opt.navigation.inline.inline) {
                        nav.prepend('<li><a href="#" class="prev"><img src="' + opt.navigation.inline.imagePrev + '" alt="prev" /></a></li>');
                        nav.append('<li><a href="#" class="next"><img src="' + opt.navigation.inline.imageNext + '" alt="next" /></a></li>');

                        $('.navItem').bind("click", obj.navChange);
                        $('.prev').bind("click", obj.next);
                        $('.next').bind("click", obj.previous);
                    }

Ik maak hier een navigatiesysteem aan door middel van het volgende:

JavaScript:

var slider1 = $('#slider').foo().Slider({ ... opties ...});
var slider2 = $('#slider2').foo().Slider({ ... opties ...});

Nu is het probleem dat, wanneer ik 2 sliders op 1 pagina heb de click functies gelden voor alle sliders. Hoe kan ik er voor zorgen dat hij de juiste slider pakt?

[OkkE]

Je selecteert nu "alle elementen binnen je hele document met de class prev (etc)", als je de elementen die je daar aanmaakt in een variabele stopt, kan je er vervolgens de events aan hangen.

[Rekcor]

Deze code bind het event alleen aan items met class '.navItem' binnen een item met id '#slider':

JavaScript:

$('#slider').find('.navItem').bind("click", obj.navChange); 

[xzaz]

Gewoon zoeken in me navigation container dus:

JavaScript:

$(opt.navigation.container).find('.navItem').bind("click", obj.navChange);
$(opt.navigation.container).find('.next').bind("click", obj.next);
$(opt.navigation.container).find('.prev').bind("click", obj.previous);

Bedankt!

[ Voor 7% gewijzigd door xzaz op 21-08-2012 16:37 ]

[Kiphaas7]

xzaz schreef op dinsdag 21 augustus 2012 @ 16:37:
Gewoon zoeken in me navigation container dus:

JavaScript:

$(opt.navigation.container).find('.navItem').bind("click", obj.navChange);
$(opt.navigation.container).find('.next').bind("click", obj.next);
$(opt.navigation.container).find('.prev').bind("click", obj.previous);

Bedankt!

Doe dan:

JavaScript:

var $container = $(opt.navigation.container);
$container.find('.navItem').bind("click", obj.navChange);
$container.find('.next').bind("click", obj.next);
$container.find('.prev').bind("click", obj.previous);

3x op dezelfde selector zoeken is overbodig; cache dan je selector en gebruik die variabele om in verder te zoeken.

Of nog beter, verdiep je eens in delegate(), of .on() als je jQuery 1.7 (of nieuwer) gebruikt.

Als vuistregel kan je gebruiken dat veel event listeners binden slecht voor je performance is (nog algemener: rotzooien in de DOM is kostbaar: tot een minimum beperken). Nou zal dat reuze meevallen in jouw gevallen (slechts 3 items), maar het is geen slecht idee om eens te kijken naar delegate/on zeker aangezien je al een object hebt met event functies.

[xzaz]

Bedankt heb nu de reference bewaard. Zal me eens verdiepen in delegate en on.

[OkkE]

Nog een optie is om eerst een element te maken (bijv. prev = $('<li>...</li>')) en die dan later gebruiken om direct je click-event aan te hangen, in plaats van na het toevoegen weer opnieuw te zoeken met .find().

[xzaz]

Nog een ander vraagje; is niet echt de moeite waard om een nieuw topic voor te openen.

Ik doe het nu zo:

JavaScript:

$('#Slider').foo().Slider({ ... options ...});

Dit werkt allemaal prima totdat er een pagina komt waar #Slider niet bestaat. Nu kan je natuurlijk alleen dit script laden wanneer die op een zekere pagina komt waar #Slider wel bestaat maar ik zou graag alles bij elkaar willen houden.

Wanneer #Slider dus niet bestaat gaat hij alsnog alles uitvoeren binnen het Object op een non exsisting object (div). Hoe los je dit mooi op?

[Kiphaas7]

Als je nou eerst had verdiept in .on() of .delegate()....

http://api.jquery.com/on/

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Of je checked of je element bestaat met .length property. Als length 0 is bestaat het element niet.

[ Voor 11% gewijzigd door Kiphaas7 op 23-08-2012 11:27 ]

[Kiphaas7]

OkkE schreef op woensdag 22 augustus 2012 @ 16:35:
Nog een optie is om eerst een element te maken (bijv. prev = $('<li>...</li>')) en die dan later gebruiken om direct je click-event aan te hangen, in plaats van na het toevoegen weer opnieuw te zoeken met .find().

En extra bonus is dat je element dan nog niet in de DOM zit en manipulatie dan goedkoper is!

[xzaz]

Kiphaas7 schreef op donderdag 23 augustus 2012 @ 11:23:
Als je nou eerst had verdiept in .on() of .delegate()....

http://api.jquery.com/on/


[...]


Of je checked of je element bestaat met .length property. Als length 0 is bestaat het element niet.

Het gaat mij niet om de events, meer om de executing van de code / object constructor. Hij hoort gewoon de plugin niet uit te voeren wanneer het element niet bestaat.

Doe het wel met length, alleen zo viessss

[ Voor 4% gewijzigd door xzaz op 23-08-2012 11:41 ]

[Kiphaas7]

xzaz schreef op donderdag 23 augustus 2012 @ 11:39:
[...]

Het gaat mij niet om de events, meer om de executing van de code / object constructor. Hij hoort gewoon de plugin niet uit te voeren wanneer het element niet bestaat.

Doe het wel met length, alleen zo viessss

Een object kan je ook pas uitvoeren als een element bestaat, en dat kan prima met events.

• Bind .on() aan een custom event (startNavigationInline, weet ik veel) aan bijvoorbeeld je document root
• trigger dat event op domready(), of wanneer dan ook
• In je .on() hangt je object. .on() filter argument meegeven dat het alleen mag triggeren voor je element '#slider'
• Je object zal dan alleen worden uitgevoerd als je custom event getriggerd wordt, EN '#slider' bestaat.

Of je gaat kijken in de sourceode van jQuery van .on() en kijkt hoe zij niet bestaande elementen daar afvangen.

[ Voor 29% gewijzigd door Kiphaas7 op 24-08-2012 09:48 ]

[xzaz]

Ik doe het nu zo via 'on' method.

JavaScript:

var nav = $(opt.navigation.container);
$(nav).on("click", ".navItem", obj.navChange);

Wat ik dus begrijp is dat hij 1 event handler aanmaakt voor alle onderliggende '.navItem' en deze kan je dan weer via 'this' in (mijn geval) obj.navChange aanroepen.

[Kiphaas7]

xzaz schreef op maandag 27 augustus 2012 @ 11:05:
Ik doe het nu zo via 'on' method.

JavaScript:

var nav = $(opt.navigation.container);
$(nav).on("click", ".navItem", obj.navChange);

Wat ik dus begrijp is dat hij 1 event handler aanmaakt voor alle onderliggende '.navItem' en deze kan je dan weer via 'this' in (mijn geval) obj.navChange aanroepen.

Bijna . De code maakt een event listener op $(nav) aan, die luister naar clicks. Events 'bubbelen' naar boven in de DOM tree: wat zou betekenen dat alle onderliggende elementen die een 'click' oproepen je event handler obj.navChange zouden aanroepen. Ware het niet dat je met het argument '.navItem' eigenlijk zegt: niet alle onderliggende element mogen obj.navChange aanroepen, alleen elementen met de class 'navItem'.

Voor het geval je het nog niet wist: jQuery stuurt het event object door naar je obj.navChange. Je kan dus navChange gebruiken met 1 of geen argument. Als je extra variabelen wil doorsturen (bijvoorbeeld als je in object zit waar je toch perse een reference naar this van het object wil hebben) dan zitten die verstopt in event.data.

[xzaz]

Kiphaas7 schreef op dinsdag 28 augustus 2012 @ 07:14:
[...]


Bijna . De code maakt een event listener op $(nav) aan, die luister naar clicks. Events 'bubbelen' naar boven in de DOM tree: wat zou betekenen dat alle onderliggende elementen die een 'click' oproepen je event handler obj.navChange zouden aanroepen. Ware het niet dat je met het argument '.navItem' eigenlijk zegt: niet alle onderliggende element mogen obj.navChange aanroepen, alleen elementen met de class 'navItem'.

Voor het geval je het nog niet wist: jQuery stuurt het event object door naar je obj.navChange. Je kan dus navChange gebruiken met 1 of geen argument. Als je extra variabelen wil doorsturen (bijvoorbeeld als je in object zit waar je toch perse een reference naar this van het object wil hebben) dan zitten die verstopt in event.data.

Duidelijk, en ja ik wist het; maak er ook gebruik van. Het werkt prima zo, bedankt.