Get custom attribute value in Jquery?

Question

I have this html

<a data-overlay="Preparing First" href='#'>First link</a>
<a data-overlay="Preparing Second" href='#'>Second link</a>

And JS

$("[data-overlay]").click(function () {
        var text = $(this).val($(this).attr("data-overlay"));
        alert(text);
    });

When I do this, I got only OBJECT, where I got wrong?

Here is working fiddle

What I need is to alert value of that custom attribute?

tymeJV · Accepted Answer · 2014-10-29 13:09:57Z

21

Because you're alerting the result of .val() (and I'm not sure why you're using it) which is a jQuery object - you simply want the attribute:

var text = $(this).attr("data-overlay")
alert(text);

answered Oct 29, 2014 at 13:09

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 10:26:00Z

5

In addition to tymeJV's answer, you can also get data- attributes in jQuery with the .data() method.

var text = $(this).data("overlay")
alert(text);

Be aware that doing so will return numbers, Booleans, or objects, if jQuery detects the data to be of that type. You can read more about that here.

CommunityBot

11 silver badge

answered Oct 29, 2014 at 13:12

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges