Question

I have

<div data-text="This is a text">...</div>

I need to access the data-text in javascript.
It works with alert($('div').data('text')); but not with alert($.data($('div'), 'text')); gives me undefined.

WHY?

LINK: http://jsfiddle.net/tvDzP/2/

(For performance issues I use element.attr('data-text') to retrieve the text )

Answer 1

Normally $.data expects a DOM node, not a jQuery object.

$('div').data('text') // correct
$.data($('div')[0], 'text') // correct
$.data($('div'), 'text') // incorrect

However, for the data-* attributes, $.data doesn’t work unless the value has already been retreived once by $(element).data().

From the docs:

Regarding HTML5 data-* attributes: This low-level method does NOT retrieve the data-* attributes unless the more convenient .data() method has already retrieved them.

Demo