jQuery's data() attribute does not update when element data changes

Question

I wanna use jQuery's data() api to retrieve all the data attribute of an element. But the cache nature of this api is really annoying. Sometimes I need to change some data atribute of an element in javascript but the data() api always return the initial value of each data attribute. So I have to use the attr() to access each data attribute of an element to get its up-to-date value. Is there any way to overcome this cache thing and make data() always return the latest value every time I call it?

Answer 1

The short answer is: don't use jQuery .data() for dynamically set data attributes, unless you can guarantee that data attributes are always set by jQuery.

Either solution below will work:

• Use DOM instead
• Use jQuery .attr() instead

Here's the relevant part from the jQuery documentation (which I don't think really highlights how much this might surprise jQuery users):

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).

Regarding why you might not use jQuery to set attributes: many client side templating languages build DOM, including data attributes.

Given the dynamically built HTML (as shown in DevTools:

<form data-test="300" ...

DOM API tells the truth:

 document.querySelector('form').getAttribute('data-test');

JQuery returns an out-of-date previous value (in this case, 19000):

 $('form').data('test');

jQuery attr also return the current value:

 $('form').attr('data-amount');

Answer 2

You can also use jQuery's .removeData() method after updating the data attribute to reset its cache.

For example:

> document.querySelector('.sub-panels')
<div class=​"sub-panels">​…​</div>​

> document.querySelector('.sub-panels').setAttribute('data-test', 300);
undefined

> document.querySelector('.sub-panels')
<div class=​"sub-panels" data-test="300">​…​</div>​

> $('.sub-panels').data('test')
300

> document.querySelector('.sub-panels').setAttribute('data-test', 400);
undefined

> $('.sub-panels').data('test')
300

> $('.sub-panels').removeData();
[div.sub-panels, prevObject: jQuery.fn.init(1), context: document, selector: ".sub-panels"]

> $('.sub-panels').data('test')
400