Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?

Question

Here's a simple example to illustrate the behavior:

Given this html markup:

<div data-company="Microsoft"></div> 

and this jQuery code (using jQuery 1.5.1):

// read the data alert($("div").data("company")); // returns Microsoft <<< OK!  // set the data $("div").data("company","Apple"); alert($("div").data("company")); // returns Apple <<< OK!  // attribute selector alert($("div[data-company='Apple']").length); // returns 0  <<< WHY???  // attribute selector again alert($("div[data-company='Microsoft']").length); // returns 1  <<< WHY???  // set the attribute directly $("div").attr("data-company","Apple"); alert($("div[data-company='Apple']").length); // now returns 1 <<< OK! 

Since jQuery automatically imports the HTML5 data-* into jQuery's data object, shouldn't the attributes be updated as well when the data changes?

Answer 1

Normally, there's not a need for roundtripping .data()'s if you're consistent in using .data() to access/set/modify data on DOM elements. For that reason, it makes sense to avoid the performance overhead of accessing the DOM for every .data() set/modify operation (.data() stores its values in jQuery.cache internally).

If you want to force the roundtrip behavior yourself, you could subscribe to the "setData" or "changeData" events and then push the .data() update in those events through to the corresponding DOM element via .attr().

Answer 2

This is the correct behavior according to the docs:

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