MooTools Event Delegation using HTML5 data attributes.
- by Anurag
Is it possible to have event delegation using the HTML5 data attributes in MooTools?
The HTML structure I have is:
?<div id="parent">
<div>not selectable</div>
<div data-selectable="true">selectable</div>
<div>not selectable either.</div>
<div data-selectable="true">also selectable</div>
</div>????????????????????????????????????????????????????????????????????????
And I want to setup <div id="parent"> to listen to all clicks only on child elements that have the data-selected attribute.
Please let me know if I'm doing something wrong:
The events are being setup as:
$("parent").addEvent("click:relay([data-selectable])", function(event, el) {
alert(this.get('text'));
});
but the click callback is fired on clicking all div's, not just the ones with a data-selectable attribute defined. You can see this example on http://jsfiddle.net/NUGD4/
A workaround is to adding this as a CSS class, which works with delegation but I would prefer to be able to use data-attributes as it's used throughout the application.
