Data attribute changes not detected with jQuery

Question

I am changing the data-demo attribute of a div element and when I want to check it with in another event, it always shows me the initial value of it instead of the current value.

This is the code I am using:

$('#showValue').click(function(){
    alert($('.value').data('demo'));
});

$('.update').click(function(){
   $('.value').text('updated').attr('data-demo', 'updated');
});

Why is this happening?

Here's a fiddle with the example I am talking about: http://jsfiddle.net/f5Cpm/

Thanks.

Answer 1

After the internal data is first initialized, it never goes back to the attribute to get or set the value, therefore updating the attribute will not update what is stored in .data() if you've already used .data on that element.

Read more here