CODEWITHSUNDEEP
javascriptjqueryhtml
Mickel
Mickel

Reputation: 6696

jQuery: Get clicked anchor from within unordered list

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.

Upvotes: 1

Views: 2773

Answers (4)

Nick Craver
Nick Craver

Reputation: 630429

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

Upvotes: 4

RobertPitt
RobertPitt

Reputation: 57268

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

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

Upvotes: 0

Pointy
Pointy

Reputation: 413727

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.

Upvotes: 0

Tomalak
Tomalak

Reputation: 338218

$('.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
});

Upvotes: 0

Related Questions