Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.x] .data() keys do not match HTML5 data specification when two dashes are used #2070

kevin-brown opened this issue Feb 7, 2015 · 1 comment


Copy link

kevin-brown commented Feb 7, 2015

jQuery has provided the .data() method since 1.4, and in 1.6 there was a change that made it conform to the HTML5 data specification. According to the specification, the key nested-single should be converted into nestedSingle, and nested--double should be converted into nested-Double.

The .data() method allows for no arguments to be provided, which the docs says should return all of the values as an object

Calling .data() with no parameters retrieves all of the values as a JavaScript object.

In jQuery 2.x, this works correctly and $(element).data() matches element.dataset as one would expect.

In jQuery 1.x, data attributes with two consecutive dashes (--) are converted the same way as data attributes containing a single dash. This means that nested-single and nested--single are treated in the same way, both being converted to nestedSingle.

Special notes

In 1.6 through 1.6.3, attributes containing two dashes in a row are not included in the returned object. This appeared to be fixed in 8e8fa6d, which makes 1.6.4 the first version where this bug appears in 1.x.


HTML code used for testing

<div data-one="none" data-nested-single="single" data-nested--double="double"></div>

jQuery .data test

var data = $('div').data();

assert.equal(data['one'], 'none');
assert.equal(data['nestedSingle'], 'single');
assert.equal(data['nested-Double'], 'double');

This will pass in 2.x, but fail in 1.x.

HTML5 dataset test

var data = $('div')[0].dataset;

assert.equal(data['one'], 'none');
assert.equal(data['nestedSingle'], 'single');
assert.equal(data['nested-Double'], 'double');

This passes, as expected.

/refs select2/select2#2969
/cc @loic

Copy link

gibson042 commented Feb 7, 2015

This is definitely related to #1751 and will be fixed by (and supports) its solution, but is arguably distinct.

kevin-brown added a commit to select2/select2 that referenced this issue Feb 24, 2015
As we have established already, jQuery 1.x does not correctly handle
`data-*` attributes where there are multiple dashes.  This makes it
so we can still handle nested options when working with jQuery 1.x
by using the `.dataset` option that is supported by all major
browsers as well as IE 11+.

Browser support tables for the `.dataset` attributes can be found at

A notice was already added to the documentation about this in

The related ticket in the jQuery repository about this issue is

This closes #2969.
@timmywil timmywil self-assigned this Mar 4, 2015
timmywil added a commit that referenced this issue May 4, 2015
@gibson042 gibson042 added this to the 3.0.0 milestone Jul 13, 2015
@lock lock bot locked as resolved and limited conversation to collaborators Jun 19, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

No branches or pull requests

3 participants