Get data-attribute jquery vs javascript

Question

I have a custom data-attribute set by default:

data-equipment="0"

If i change it with jquery using .data()

$(this).data("equipment", 10)

and then use the getAttribute()

this.getAttribute("data-equipment")

i get the old value (0) and not the new one (10). But if i use

$(this).data("equipment") i get the new value (10).

Is this supposed to work like this or am i missing something?

Thanks!

Solution

.data() doesn't operate on data attributes but in internal jQuery cache. Initially if no cache record is found, the data is read from a corresponding data- attribute if one exists, but that is the end of their co-operation.

If it operated on attributes, it would be useless for its purpose because attribute values must be strings.

Comments

[MÇT]

I think this is the main difference between $(this).data("equipment") and $(this).attr("data-equipment"). If you retrieve some data attribute with $(this).data("equipment") and change attribute value with $(this).attr("data-equipment", "some value"), then you cannot retrieve new value with $(this).data("equipment") due to the caching mechanism of jQuery.