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