jQuery: Get clicked anchor from within unordered list

Question

I have this markup (simplified):

<ul class="targets">
    <li><a href="javascript:void(0);" class="info">A</a></li>
    <li><a href="javascript:void(0);" class="info">B</a></li>
    <li><a href="javascript:void(0);" class="info">C</a></li>
</ul>

And this script (simplified):

$('.targets').click(function(e) {
    alert(e.target); // alerts "javascript:void(0);"
});

What I really want is the clicked anchor object, not the target for the anchor.

If this is possible, how do I do it?

It must be anchors in the list, but the function must handle clicks on other dom elements as well.

Answer 1

$('.targets li a.info').click(function(e) {
    alert(this);     // alerts the anchor DOM object itself
    alert(e.target); // alerts "javascript:void(0);" <- this *should* do the same
});

Answer 2

It's not doing what you think it's doing; e.target is definitely your <a> element. Try changing it to alert(e.target.className) to prove it to yourself.

Answer 3

$('.targets li a').click(function(e) {
    alert(this.attr('href'));
});

the keyword "this" as a jQuery reference to the element at hand

Answer 4

I think your confusion comes from the e.target toString being the href property, for example:

$('.targets').click(function(e) {
  alert(e.target.nodeName); // alerts "A"
  $(e.target).fadeOut();    //this would fade out the anchor you clicked on
})​;

e.target is what you already have, you just need to access whatever property you're interested in on it. Otherwise when you alert it, by default it shows the href property.

Here's a demo to see what I mean