jQuery 1.8.1 data() error retrieving HTML5 data-attribute

Question

I'm trying to extract the FIRST data attribute from the following mark-up:

<button class="buttonMiddle" data-vid="1">
    <a href="#">who helped them</a>
</button>

<button class="buttonMiddle" data-vid="2">
    <a href="#">who helped them</a>
</button>

the JS I've conjured is:

var button1 = $('.buttonMiddle').get(0).data('vid');

console.log(button1);

Chrome's console gives me this:

Uncaught TypeError: Object # has no method 'data'

I've covered the basic troubleshooting --> jQuery is loaded before this js file, they are both loaded just before the closing body tag (so no need for $(function() {// find data-attribute});.

.get() will get you a DOM Element - if you want to use .data() you need a jQuery object because .data() is a jQuery method so using .eq() will return a jQuery object — wirey00
– wirey00, Commented May 6, 2013 at 13:08

Eli · Accepted Answer · 2013-05-06 13:02:19Z

6

Try to use eq() instead of get() here:

var button1 = $('.buttonMiddle').eq(0).data('vid');

answered May 6, 2013 at 13:02

Eli

14.9k5 gold badges61 silver badges77 bronze badges

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

2 Comments

Mat Methodik Over a year ago

Perfect, thats the solution! For anyone else who comes by this, if you want to read more on @wirey's explanation check it out here --> api.jquery.com/eq

QMaster Over a year ago

Be careful about key that must be lowercase when using $(selector).data(<lowercase param name>) no matter how defined Upper or Lower case. Or using full parameter names with original case when you use $(selector).attr(<full param name>).

Collectives™ on Stack Overflow

jQuery 1.8.1 data() error retrieving HTML5 data-attribute

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related