JQuery .attr and .data method gives different value for same attribute

JQuery .attr and .data method gives different value for same attribute

HTML

<ul>
<li class="current" title="some title" data-atype="some type" data-rrr="1196">
  Some text
</li>
</ul>
<p>klik om aan te passen</p>
<span></span>

JavaScript

$(document).ready(function() {
    
 alert($('li.current').data('rrr'))   ; 
    $('p').click(function() {
        $('li.current').data('rrr','2012');
        alert($('li.current').data('rrr'))   ; 
        // $('span').html('li.current').attr('data-rrr');
        
        
    });
});