Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

get wrong value in data attribute jquery

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

like image 281
Mamen Avatar asked Feb 05 '15 03:02

Mamen


3 Answers

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.

like image 79
Barmar Avatar answered Oct 13 '22 02:10

Barmar


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

is different than

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

so, use the second instead.

Check Data vs Attr for details.

like image 24
Bardh Lohaj Avatar answered Oct 13 '22 02:10

Bardh Lohaj


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');
like image 42
Milind Anantwar Avatar answered Oct 13 '22 01:10

Milind Anantwar