jQuery differences between .data('key') and .attr('data-key')

Dani 7 Tallied Votes 236 Views Share

I just racked my brain for the past hour trying to fix a bug, and learned something new in the process.

I always thought that the jQuery function .data('key') was a wrapper for .attr('data-key'). It turns out that's not the case!

Take the example: <div data-key="foo">:

I can use data('key', 'foo') to set data-key to something in the DOM. I can use data('key') to retrieve the value of the data. I can also use attr('data-key')to retrieve the value of the data.

It turns out the data() method has a cache, and once a value is set, anytime you use .data() to retrieve it, it's always retrieved from the cache. When using the attr() method, it's always retrieved from the latest value in the DOM.

Just thought I'd pass this on.

pritaeas commented: Great find! +17
Mr.M 58 Future Programmers

Does it also retrieve from the catch even if you had set your browser to not use catch?

Thanks also for sharing your finding.

Dani 3,550 The Queen of DaniWeb Administrator Featured Poster Premium Member

Yes, it’s unrelated to the browser’s asset cache. By “cache” I simply mean that jQuery’s get and set data() on an DOM element are essentially just getting and setting a Javascript variable attached to the element, with the added convenience of this variable being initialized to whatever happens to be the value of the element’s data-* property, at the time of page load, if any. Multiple data() calls to update the value does not update the corresponding DOM property, however.

This differs from setting the DOM data-* attribute with attr() because doing so almost serves as a visible variable that is being manipulated in the DOM itself.

The conclusion is either always use data() or always use attr() and you can never go wrong, because, in doing so, you’ll always be setting and getting the same variable attached to a DOM element. It’s making the assumption that you’re working with the same variable interchangeably that can cause undesired results.

Dani 3,550 The Queen of DaniWeb Administrator Featured Poster Premium Member

So I actually just want to clarify something here that I think I might not have explained well.

You can always use data('key', 'foo') to set and then use data('key') to retrieve. You can set, and re-set, and the retrieval will always take the last-set value.

However, if you use the data-key HTML attribute, on page load, that value gets cached as the value for data('key'). You can then use either attr('data-key') to retrieve the value, or you can use data('key') to retrieve the same value. But here's the distinction: If you then update the data-key attribute in the DOM, it doesn't update data() as well. That means that if you update data-key in the DOM, then attr('data-key') will return the updated value, but data('key') will return whatever the value was when the DOM was initially loaded.

Long story short, always use either data-key or always data() but mixing and matching methods might have you ending up with inconsistent results.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.