Issue: YUI3 - Onclick event handling for links having same classes

We have few links in the page having same class. When I click on one of the links there are some different actions to be taken based on the which link was clicked, For e.g.

<a href="?page=1" data="test1" class="sample">One</a>
<a href="?page=2" data="test2" class="sample">two</a>
<a href="?page=3" data="test3" class="sample">three</a>

handler code:

Y.all('.sample').on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
});

when I click any of the links I get the list of all "data" attribute. We only need the data of link clicked.

Issue: YUI3 - Onclick event handling for links having same classes

We have few links in the page having same class. When I click on one of the links there are some different actions to be taken based on the which link was clicked, For e.g.

<a href="?page=1" data="test1" class="sample">One</a>
<a href="?page=2" data="test2" class="sample">two</a>
<a href="?page=3" data="test3" class="sample">three</a>

handler code:

Y.all('.sample').on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
});

when I click any of the links I get the list of all "data" attribute. We only need the data of link clicked.

• javascript
• yui
• yui3

3 Answers 3

You can also use e.target instead of this to access the element being clicked:

Y.all('.sample').on('click', function(e){
  e.preventDefault();
  alert(e.target.getAttribute("data"));
});

And for even better performance you can use event delegation:

Y.one('body').delegate('click', function(e){
  e.preventDefault();
  alert(this.getAttribute("data"));
}, '.sample');

all gives you a list of matched elements. You can use each to iterate through the list and do stuff for individual node. Refer to their Node Class API for more information.

Here is the code, and an example on jsfiddle.

Y.all('.sample').each(function(node) {
    node.on('click', function(e) {
        e.preventDefault();
        alert(node.getAttribute("data"));
    });
});​

There is also a FAQ entry for this question in the Event user guide on yuilibrary. (http://yuilibrary./yui/docs/event/#nodelist-this). It's generally preferable to use event delegation.

Here event delegation is better solution, agree with @juandopazo

If you do not want to use delegation, you can use Y.all('.sample').each(...) (solution from @user322896) or e.target (solution from @juandopazo), but I usually do it another way:

Y.on('click', function(e){
    e.preventDefault();
    alert(this.getAttribute("data"));
}, '.sample');

This is not a delegation syntax (listeners will be attached on links directelly) and there is no NodeList object, so this refers to particular link node. This way is also have preformance advantage paring to Y.all('.sample'), read this: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?