jQuery - How to get attribute of an element when using the 'click' event

Question

I'm using jQuery to get a click on an 'a' element. I have a list of those links where each one has a class which by him I'm capturing the click.

I would like to know which of the links has been clicked (I have an attribute 'setid' for each link) and also get the point where the mouse has been clicked.

How could this be accomplished?

example of the code:

<a href="#" class="newItem" setid="28">click me</a>

$('.newItem').click(function (e) {
    alert(e.attr('setid'));
});

EDIT: OK, so to get the position I would use e.pageX

If you are going to add arbitrary attributes to your HTML, like "setid", you may want to consider adding the "data-" flag as this will pass validation. Essentially setid="28" isn't valid, but data-setid="28" is. — Skylar Anderson
– Skylar Anderson, Commented Sep 22, 2011 at 18:12

BNL · Accepted Answer · 2011-09-22 18:10:39Z

50

To use jQuery methods you have to wrap this with a call to jQuery.

$('.newItem').click(function () {
    alert($(this).attr('setid'));
});

answered Sep 22, 2011 at 18:10

BNL

7,1214 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Loser Coder Over a year ago

Hello, I'm having some problems with the .click(function(e)) { } when using IE9 for an anchor tag. Any idea how to get the attribute without using JQuery .click? example: function doClickFunction() { $(this).attr('class'); } doesn't work when you use plain JS and JQuery $(this)

BNL Over a year ago

Ask as new question please.

user5207771 · Accepted Answer · 2015-08-09 08:16:37Z

4

refer to the code given below:

document.getElementById("element_id").addEventListener("click",function(e)
{
 console.log(e.srcElement.getAttribute("data-name"));
},false);

answered Aug 9, 2015 at 8:16

user5207771

1 Comment

barrylachapelle Over a year ago

Very nice. Thank you. I was looking for a vanilla way to do this.

Michael K · Accepted Answer · 2013-11-01 21:46:52Z

2

Like Skylar said in the comment to your question, you can use "data-" in front of your new attribute (which is HTML5 valid).

<a href="#" class="newItem" data-setid="28">click me</a>

Then in jQuery (v1.4.3+) you can get it like:

var setid = $(this).data("foo");

It's even a little nicer than attr() that other people have mentioned. See this for more examples - http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/

answered Nov 1, 2013 at 21:46

Michael K

1,0533 gold badges14 silver badges27 bronze badges

Comments

BNL · Accepted Answer · 2012-01-21 13:11:47Z

1

You're on the correct path.

$(function(){

    $('.newItem').click(function () {
        alert( $(this).attr('setid') );
    })
});

edited Jan 21, 2012 at 13:11

BNL

7,1214 gold badges30 silver badges32 bronze badges

answered Sep 22, 2011 at 18:11

aziz punjani

25.8k9 gold badges49 silver badges56 bronze badges

Comments

lonesomeday · Accepted Answer · 2011-09-22 18:12:58Z

0

Your code is almost right to get the attribute. The only thing missing is wrapping this (a DOM element) in the jQuery wrapper so you can use jQuery functions. $(this).attr('setid') should work.

To get the page coordinates, use the pageX and pageY properties of the event object. So:

$('.newItem').click(function (e) { // e is the event object
    alert($(this).attr('setid'));
    alert(e.pageX);
    alert(e.pageY);
});

See the documentation on the Event object.

answered Sep 22, 2011 at 18:12

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Collectives™ on Stack Overflow

jQuery - How to get attribute of an element when using the 'click' event

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related