get wrong value in data attribute jquery

Question

i have a div with data attribut like

<div class='p1' data-location='1'></div>

and i have script like

$('button').click(function(){

    var loc = $('.p1').data('location');
    alert('data location is'+loc);//SHOW THE DATA

    var num = 10;
    var count = loc;
    var element = $('.p1');
    var intv = setInterval(anim,1000); 
    function anim(){
        count++;
        num--;
        if(count==37){count = 1;}
        if(num==1){clearInterval(intv);}
        $(element).animateCSS('bounceOut',{
            callback: function(){
                $(element).attr('data-location',count);
                $(element).animateCSS('bounceIn');
            }
        });

    }
    anim();

});

with the script above the data-location attribute will be updated to 10, but if i click the button again, the data-location is still 1

score 18 · Answer 1 · answered Feb 05 '15 at 03:50

The first time that you use .data() to access a data-* attribute, the value of that attribute is cached internally by jQuery, and .data() uses the cache from then on. Updating the attribute with .attr() does not update the cache, you need to use .data() to update it. That's why you need to use

$(element).data('location', count);

to update it.

score 3 · Answer 2 · edited May 23 '17 at 10:30

3

        $(element).attr('data-location',count);

is different than

        $(element).data('location',count);

so, use the second instead.

Check Data vs Attr for details.

edited May 23 '17 at 10:30

Community

1
1

answered Feb 05 '15 at 03:44

Bardh Lohaj

1,402
1
9
17

score 3 · Answer 3 · answered Feb 05 '15 at 03:44

3

you are setting the attr property and not data using .attr('data-location',count). to get the attribute you need to use .attr('data-location'):

var loc = $('.p1').attr('data-location');

answered Feb 05 '15 at 03:44

Milind Anantwar

81,290
25
94
125

I was having a similar issue because an item got the same id of an item that was deleted from the DOM but the cache still kept the old value. Using attr to access the value solved the problem – valepu Jun 11 '19 at 08:33

score 0 · Answer 4 · answered Jun 16 '22 at 02:59

I know this is an old question, but I'm visiting in 2022 and really this shouldn't be done in jQuery. The caching is a bad idea, and shouldn't need to update it using their magic method.

The best method for accessing data attributes is via the JavaScript element.dataset property.

By simply calling element.dataset rather than $(element).data(), you will always get the latest data object.

get wrong value in data attribute jquery

4 Answers4

Linked

Related