MooTools Event Delegation using HTML5 data attributes.

Posted by Anurag on Stack Overflow See other posts from Stack Overflow or by Anurag
Published on 2010-04-17T21:10:13Z Indexed on 2010/04/17 21:13 UTC
Read the original article Hit count: 476

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.

© Stack Overflow or respective owner

Related posts about mootools

Related posts about JavaScript