jQuery getting wrong value when getting data attribute

Question

I have a div with data attributes

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

I have a script like this

$('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 above script, the data position property will be updated to 10, but if I click the button again, the data position is still 1

Answer 1

The first time .data() is used to access the data-* property, the value of the property is cached internally by jQuery, and .data() Use caching from then on. Updating an attribute using .attr() will not update the cache, you need to use .data() to update it. That's why you need to use

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

Update it.