.data() not working properly as HTML5 element.dataset does

[[email protected]…]

If you have an element:

<div data-color="black" data-id="1">...</div>

The $("div").data() and $("div").get(0).dataset will return:

{color: "black", id:"1"}

If in js code we do:

$("div").attr("data-user","John");

Then the $("div").data() is not affected, but the $("div").get(0).dataset is updated:

{color: "black", id:"1", user:"John"}

[anonymous]

JSFiddle example: ​http://jsfiddle.net/qWpbm/

[dmethvin]

The data attributes map is only synchronized once, otherwise it would be extremely expensive to retrieve:

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). ​http://api.jquery.com/data/

Please read the docs and ask for help on the forum if it still isn't clear.