MooTools Event Delegation using HTML5 data attributes

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 de开发者_开发百科fined. 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.

What you can do is use the future selector engine (from 1.3) with the 1.2 release, just follow these instructions: gist.github.com/361474

Mootools does not accept "-" in attribute name. I consider, it's bug. Use undersore:

data_selectable="true"

Starting with MooTools 1.3, the code below works just fine as seen in this DEMO

<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>

$("parent").addEvent("click:relay([data-selectable])", function(ev, el) {
    this.highlight();
});