Question

I’m having some trouble accessing the data attributes of a dynamically(ajax) loaded file.

For example I might load a file that has a result:

<div id="blah" class="hello" data-something="or_other" />

And then do the jquery:

var blah_id = $('#id').attr('id'),
    blah_class = $('#blah').attr('class'),
    blah_something = $('#blah').data('something');

I end up with:

   blah_id === 'blah';
   blah_class === 'hello';
   blah_something === null;

I know the html is ok, because if I take this result and put it on the page before doing a ajax call I get everything I need.

Is there something special about data attributes I don’t understand?

UPDATE
I have noticed that the dynamically loaded file actually prints out the data attribute – ie. it is visible in the printed html. To my knowledge its not supposed to be visible in the html, and when it works on a statically loaded page it is invisible in the printed html.

Answer 1

That’s weird, seems to work here. The .data() method tries to parse the value and convert it to the underlying type:

For example:

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";