Can't update data-attribute value

Question

Although there are some examples of this on the web, it does not seem to work correctly. I can't figure out the problem.

I have this simple HTML

<div id="foo" data-num="0"></ div> <a href="#" id="changeData">change data value</a> 

Every time I click the link "change data value" I want to update the data value of data-num. For example, I need it to be 1,2,3,4,... (plus 1 every time I click the link)

what I have is

var num = $('#foo').data("num"); console.log(num); num = num+1;                console.log(num); $('#foo').attr('data-num', num);    

The value changes one time from 0 to 1 every time. I can't make it incremental. Any suggestions on what I'm doing wrong?

Answer 1

Use that instead, if you wish to change the attribute data-num of node element, not of data object:

DEMO

$('#changeData').click(function (e) {      e.preventDefault();     var num = +$('#foo').attr("data-num");     console.log(num);     num = num + 1;     console.log(num);     $('#foo').attr('data-num', num); }); 

PS: but you should use the data() object in virtually all cases, but not all...

Answer 2

THE ANSWER BELOW IS THE GOOD ONE

You aren't using the data method correctly. The correct code to update data is:

$('#foo').data('num', num);  

So your example would be:

var num = $('#foo').data("num") + 1;        console.log(num)        $('#foo').data('num', num);  console.log(num)