jQuery on click
Wat is het verschillen tussen
$( '#id' ).on( 'click', '.class', function() {} );
en
$( '#id .class' ).on( 'click', function() {} );
?
En wanneer zou je het één en wanneer het andere (moeten) gebruiken?
Gewijzigd op 21/03/2014 13:22:36 door Michael -
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<ul class="block-list">
<li class="block">...</li>
<li class="block">...</li>
<li class="something-else">...</li>
<li class="block">...</li>
</ul>
<li class="block">...</li>
<li class="block">...</li>
<li class="something-else">...</li>
<li class="block">...</li>
</ul>
Code (js)
1
$('.block-list').on('click', '.block', function (e) {});
Registreert een event listener op het .block-list element. Zodra je ergens binnen het .block-list element klikt wordt deze listener uitgevoerd. Deze listener kijkt vervolgens of je op een .block element in dit .block-list element klikte, of dat je op een ander element klikte (bijv. .something-else) of op een vrije plek waar helemaal geen element is. Alleen als je op een .block element klikte wordt de callback functie uitgevoerd.
Code (js)
1
$('.block', '.block-list').on('click', function (e) {});
Registreert de callback op elke apart .block element in het .block-list element ($('.block', '.block-list') is die iets snellere equivalent van $('.block-list .block')). Zodra je op een lege plek in .block-list klikt gebeurd er niks, zodra je op .something-else klikt gebeurd er niks. Zodra je op .block klikt wordt die specifieke callback functie uitgevoerd.
De 1e variant bied een voordeel over de 2e variant wanneer...
- ...er veel .block element zijn. Aangezien je dan met heel veel kleine functies te maken had, en nu slechts met 1 kleine functie.
- ...er dynamisch .block element kunnen worden toegevoegd. Met variant 2 moet je dan weer apart de event listener instellen (zie je vorige topic), terwijl je nu niks bijzonders hoeft te doen (de listener is immers geregistreert op het .block-list element en niet elke aparte .block).
De snelheidswinst is overigens aanzienlijk:
Gewijzigd op 21/03/2014 14:18:20 door Wouter J
Is dit omdat hij anders elk .block langs gaat en nu alleen die waarop geklikt wordt?
En $('.block-list > .block') controleert toch ook of .block in .block-list zit?