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

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