html - jQuery .data() not retrieving data-*

Question

I'm testing with IE8. I just upgraded jQuery from v1.5.2 to v1.6.1 and now the data method isn't working.

the row look like this:

<tr class="ui-widget-content alt" nodeIndex="2" data-DocAttributeFieldType="TextBox" data-DocClassAttributeFieldId="60777" jQuery16106588245076914028="66">

this works:

$("#docClassAttributeFields tbody tr:first").attr("data-DocClassAttributeFieldId");

this does not work:

$("#docClassAttributeFields tbody tr:first").data("DocClassAttributeFieldId");

Is there a bug in it?

Here is an example. Run it with in 1.5.2 and then 1.6 to see how they act differently... http://jsfiddle.net/5hbKX/

Answer 1

From the docs (I suspect the change mentioned in 1.6 is to blame - have you tried removing the case, look at the lastValue example?):

HTML 5 data- Attributes

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

For example, given the following HTML:

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

All of the following jQuery code will work.

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

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null) otherwise it is left as a string. To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method. When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

From the above HTML5 specification:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.