Answer by mmmdearte for jQuery .data() does not work, but .attr() does

I can see that this has brought up some division on how to approach the data attribute setting.

I too run into this problem and I found that the issue seemed to be simply the data attribute name formatting.

In my experience, you should avoid using hyphens in the data variable (the variable name that comes after "data-").

This didn't work for me:

[Markup]

<div class="list" id="myElement1" data-item-order="some-value"> .... </div>

[jQuery]

jQuery("#myElement1").data("item-order", "my-new-value");

But the following worked just fine! :) :

(I use an underscore instead of a hyphen when required)

[Markup]

<div class="list" id="myElement1" data-item_order="some-value"> .... </div>

[jQuery]

jQuery("#myElement1").data("item_order", "my-new-value");

I hope it helps.Cheers everyone!