edit:
Hmm, titel van dit topic moet Event delegation zijn
Hmm, titel van dit topic moet Event delegation zijn
Ik ben bezig met een project waarin redelijk wat ajax calls worden gemaakt. De html die ik terugkrijg via ajax bevat regelmatig elementen waar een event aan gekoppeld moet worden. Als ik zo'n element via ajax inlaadt moet ik dus het event wat daarbij hoort opnieuw binden. Een mooie oplossing om dit opnieuw binden niet te hoeven doen is event delegation. In jQuery ziet er dit als volgt uit.
Delegate functie:
JavaScript:
1
2
3
4
5
6
7
8
9
| jQuery.delegate = function(rules) { return function(e) { var target = $(e.target); for (var selector in rules) { if (target.is(selector) || ((target = target.parents(selector)) && target.length > 0)) return rules[selector].apply(this,[target].concat($.makeArray(arguments))); } } } |
Gebruik van de delegate functie:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
| $('#element').click($.delegate( { '.selectorA' : function(e) { // doe wat }, '.selectorB' : function(e) { // doe wat } })); |
Het probleem is nu dat bovenstaande alleen werkt voor selectorA en niet voor selectorB. Als ik beide selectors lostrek in een apart click event werkt het wel:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $('#element').click($.delegate( { '.selectorA' : function(e) { // doe wat } })); $('#element').click($.delegate( { '.selectorB' : function(e) { // doe wat } })); |
Ik kom er maar niet achter waarom het niet lukt om meerdere selectors te gebruiken.. iemand enig idee?