jQuery $.data() not returning correct value when data attribute is updated

Question

I have a very strange issue. Im not sure why the $.data not returning the correct value after updating the data attibute even though the element has the correct value in firebug.

Demo: http://jsfiddle.net/gv5cR/

<div>
    <input type="text" name="price" id="price"/>
</div>
<button type="button" id="submit" data-price="100">Submit</button>
<div id="result"></div>
<script>
$(document).ready(function(){
    $('#price').change(function(){

        $('#submit').attr('data-price',$(this).val());

    });

    $('#submit').click(function(){
        $('#result').html($(this).data('price'));
    });

});
<script>

Answer 1

You should set data using .data()

$('#submit').data('price',$(this).val());

Demo ---> http://jsfiddle.net/gv5cR/2/

Answer 2

Since you've used .attr() to set the data-price value, you need to use .attr() instead of .data() to get that value:

$('#result').html($(this).attr('data-price'));

Updated Fiddle

Answer 3

use like

$('#submit').click(function(){
    $('#result').html($(this).attr('data-price'));
});

Answer 4

the data-* attribute is only used to initialize the data value if not found in the internal jQuery cache... once the value is copied to jQuery data cache any change made to the attribute will not be reflected in the data value of jQuery.

If you want to update the value in the jQuery data, you will have to use the data api , instead of changing the data-* attribute.

Demo: Fiddle

Answer 5

Just use

$('#submit').click(function(){
    $(this).attr('data-price');
});