Nie można zaktualizować wartości atrybutu danych

Chociaż istnieje kilka przykładów na ten temat w Internecie, to nie działa poprawnie. Nie mogę rozwiązać problemu.

Mam ten prosty html

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

Za każdym razem, gdy klikam link „zmień wartość danych”, chcę zaktualizować wartość danych o numerze danych. Na przykład potrzebuję go 1,2,3,4, ... (plus 1 za każdym razem, gdy klikam link)

co mam jest

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

Wartość zmienia się raz od 0 do 1 za każdym razem. Nie mogę zrobić tego przyrostowo. Jakieś sugestie, co robię źle?

questionAnswers(8)

yourAnswerToTheQuestion