Accessing HTML5 data-* attribute after changing its value

Question

I'm using a data-count attribute to count how many times a list element has been dropped into a list of targets. The element can only be dropped into each target once, but can be dropped into multiple targets.

The problem is that I need to keep track and display a count. I'm using the data attribute and running into the following problem.

On the drop, I check the initial count with

var original_count = member.data('count');

If the count is zero, I add a class to the original element, and update its data attribute with

member.attr('data-count', 1);

This works fine, I can see the change in the DOM after dropping it once. When I go to drop it a second time...

member.data('count');

Returns the initial value of zero, instead of the updated value of 1. If I change the count checker to

var original_count = member.attr('data-count');

It returns zero every drop. I just need to be able to access the updated value of an html5 data attribute. Going to RTFM and see what I missed, but any help would be appreciated.

Antti Haapala · Accepted Answer · 2013-08-02 12:06:50Z

3

JQuery caches the data values for faster access. Use data(name, newvalue) to set the values instead of attr.

answered Aug 2, 2013 at 12:06

Antti Haapala

135k23 gold badges297 silver badges349 bronze badges

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

8 Comments

James Over a year ago

I'd tried that initially, however if I set the new value using member.data('count', 1), the DOM doesn't update with the new value, and after the change, original_member.data('count'); returns 0 still on the initial check.

maverickosama92 Over a year ago

there is a issue with jquery data() method, access the value second time after updating using .attr('data-count'). see if it works

Antti Haapala Over a year ago

Of course it does not set the DOM, why do you want to set the DOM is beyond my understanding, the meaning of the data mechanism in JQuery is to allow some JavaScript data be tagged along DOM elements, not DOM modification. Just use data() everywhere, end of discussion.

James Over a year ago

That is my original issue. I tried using data everywhere and for some reason when accessing the data attribute after I've incremented it by 1, on subsequent drops, accessing it still returns zero. Going to inspect further.

Antti Haapala Over a year ago

You are not setting data using data(name, value) in your example in the question, thus not using the data() everywhere.

|

Collectives™ on Stack Overflow

Accessing HTML5 data-* attribute after changing its value

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related