MooTools Event Delegation using HTML5 data attributes

Question

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.

The thing is that the current selector engine in MooTools wouldn't even return the correct element when doing `$$('div[data-selectable]')`. There is no way around it without making some fundamental alterations to the selector engine. — Oskar Krawczyk, Apr 17 '10 at 22:46
Now, what you can do is use the future selector engine (from 1.3) with the 1.2 release, just follow these instructions: http://gist.github.com/361474 — Oskar Krawczyk, Apr 17 '10 at 22:53
thanks for the link @Oskar.. it works perfectly! is Slick going to replace the existing selector engine in 1.3? — Anurag, Apr 17 '10 at 23:48
could you add this comment as an answer, so I can accept it? — Anurag, Apr 17 '10 at 23:58
yes, in fact 1.3 release will feature Slick as the selector engine - we're all pretty excited about this, since Slick is a masterpiece! — Oskar Krawczyk, Apr 20 '10 at 22:03

score 3 · Accepted Answer · answered Apr 20 '10 at 22:02

3

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

answered Apr 20 '10 at 22:02

Oskar Krawczyk

3,492
17
20

score 2 · Answer 2 · answered Apr 17 '10 at 22:00

2

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

data_selectable="true"

answered Apr 17 '10 at 22:00

Harut

396
3
6

Replacing the dash with an underscore wouldn't make it HTML5 anymore, now would it. – Oskar Krawczyk Apr 17 '10 at 22:42

score 0 · Answer 3 · answered Mar 13 '11 at 16:31

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();
});

MooTools Event Delegation using HTML5 data attributes

3 Answers3