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?
.data(). The attribute is not updated and should not be used to store or retrieve data, only to initially set data.