Get custom attribute value in Jquery?

jquery attr
Miomir Dancevic picture Miomir Dancevic · Oct 29, 2014 · Viewed 11.9k times · Source

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

http://jsfiddle.net/sruq8kav/

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

Answer

tymeJV picture tymeJV · Oct 29, 2014

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);

Related questions

.prop() vs .attr()

So jQuery 1.6 has the new function prop(). $(selector).click(function(){ //instead of: this.getAttribute('style'); //do i use: $(this).prop('style'); //or: $(this).attr('style'); }) or in this case do they do the same thing? And if I do have …

Read More
jquery: get value of custom attribute

html5 supports the placeholder attribute on input[type=text] elements, but I need to handle non-compliant browsers. I know there are a thousand plugins out there for placeholder but I'd like to create the 1001st. I am able to get …

Read More
jQuery .attr("disabled", "disabled") not working in Chrome

Not sure why this isn't working. When people click the 'edit' button of my application, the disabled textfields become editable: $("#bewerken").click(function(e) { $("input[disabled='disabled']").removeAttr('disabled'); }); I then want to disable the textfields again when the user …

Read More