Toon posts:

[jquery] OOP click event

Pagina: 1
Acties:

Onderwerpen


  • xzaz
  • Registratie: augustus 2005
  • Laatst online: 17:18
Ik probeer een click event bij een object te houden; met andere woorden, het event moet alleen gelden voor dat object.

Ter verduidelijking:
JavaScript:
1
2
3
4
5
6
7
8
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:
1
2
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?

Schiet tussen de palen en je scoort!


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 01-11 11:58

OkkE

Front-end ninja :+

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.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • Rekcor
  • Registratie: februari 2005
  • Laatst online: 30-11 14:59
Deze code bind het event alleen aan items met class '.navItem' binnen een item met id '#slider':

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

  • xzaz
  • Registratie: augustus 2005
  • Laatst online: 17:18
Gewoon zoeken in me navigation container dus:

JavaScript:
1
2
3
$(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]

Schiet tussen de palen en je scoort!


  • Kiphaas7
  • Registratie: februari 2005
  • Laatst online: 09:31
xzaz schreef op dinsdag 21 augustus 2012 @ 16:37:
Gewoon zoeken in me navigation container dus:

JavaScript:
1
2
3
$(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:
1
2
3
4
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
  • Registratie: augustus 2005
  • Laatst online: 17:18
Bedankt heb nu de reference bewaard. Zal me eens verdiepen in delegate en on.

Schiet tussen de palen en je scoort!


  • OkkE
  • Registratie: oktober 2000
  • Laatst online: 01-11 11:58

OkkE

Front-end ninja :+

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(). :)

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.


  • xzaz
  • Registratie: augustus 2005
  • Laatst online: 17:18
Nog een ander vraagje; is niet echt de moeite waard om een nieuw topic voor te openen.

Ik doe het nu zo:

JavaScript:
1
$('#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?

Schiet tussen de palen en je scoort!


  • Kiphaas7
  • Registratie: februari 2005
  • Laatst online: 09:31
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
  • Registratie: februari 2005
  • Laatst online: 09:31
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
  • Registratie: augustus 2005
  • Laatst online: 17:18
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]

Schiet tussen de palen en je scoort!


  • Kiphaas7
  • Registratie: februari 2005
  • Laatst online: 09:31
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
  • Registratie: augustus 2005
  • Laatst online: 17:18
Ik doe het nu zo via 'on' method.

JavaScript:
1
2
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.

Schiet tussen de palen en je scoort!


  • Kiphaas7
  • Registratie: februari 2005
  • Laatst online: 09:31
xzaz schreef op maandag 27 augustus 2012 @ 11:05:
Ik doe het nu zo via 'on' method.

JavaScript:
1
2
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
  • Registratie: augustus 2005
  • Laatst online: 17:18
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.

Schiet tussen de palen en je scoort!

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee