Jquery data does not match dom attribute

Question

I have a weird problem with jquery data function. Here is the fiddle

As you can see, I am updating the active data, but I don’t see the value of the dom data-active attribute, although I re-request the active data. It writes the changed value. $ .data () does not update the attribute on dom when I check it.

Answer 1

The jQuery data api is independent of the attribute of the element, although it uses data-<key> to retrieve the initial value, if available.

jQuery uses an internal javascript object to store the value of these objects

If you want to update the attribute , you will need to use .attr('data-<key>', '<value>')

Answer 2

You will need to use attr since .data will not update the actual DOM node attribute -

 $($('li')[1]).attr('data-active', true); 

• http://api.jquery.com/data/