Getting different results from attribute.dataset and jquery .data() method

Question

I was getting unexpected results and when I debugged into the problem, I found that I was not getting right data-attribute value by Jquery .data() method. It was pretty clear that value was not right and when I changed my code to attribute.dataset.name (native property of an element) It returned me the expected value.

here's the screenshot of an error

Any ideas, what could be the possible reason because I am using a lot of data-attributes in my situation and don't want to change the code everywhere I am accessing data-attributes by Jquery .date() method.

please add some real code with explanation of error so that we can help. — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 20, 2021 at 21:10

CertainPerformance · Accepted Answer · 2021-03-20 21:15:22Z

2

.data(prop) and .dataset[prop] can be different if:

The HTML dataset contains one value
jQuery's .data has been called on the element previously to store a value associated with the same key

Example:

$('div').data('foo', 'newFooVal');

console.log($('div').data('foo'));
console.log($('div')[0].dataset.foo);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-foo="oldFooVal"></div>

jQuery's .data will retrieve:

Any previous value set with .data (which will be completely unrelated to the dataset)
If no previous value has been set to that key with that element, the value for that key in the dataset will be returned

So you have to be careful with what setting and retrieving. It's admittedly not entirely intuitive, since it'll do something different in different situations.

answered Mar 20, 2021 at 21:15

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting different results from attribute.dataset and jquery .data() method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related