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>

Why not update the data using .data() itself?

techfoobar
– techfoobar

2014-03-26 06:11:33 +00:00
Commented Mar 26, 2014 at 6:11 — techfoobar
– techfoobar, Commented Mar 26, 2014 at 6:11
I mean $('#submit').data('price',$(this).val());

techfoobar
– techfoobar

2014-03-26 06:11:50 +00:00
Commented Mar 26, 2014 at 6:11 — techfoobar
– techfoobar, Commented Mar 26, 2014 at 6:11
stackoverflow.com/questions/7261619/jquery-data-vs-attr

Zafer
– Zafer

2014-03-26 06:15:02 +00:00
Commented Mar 26, 2014 at 6:15 — Zafer
– Zafer, Commented Mar 26, 2014 at 6:15

Anoop Joshi P · Accepted Answer · 2014-03-26 06:12:40Z

1

use like

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

answered Mar 26, 2014 at 6:12

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil Shaikh · Accepted Answer · 2014-03-26 06:11:43Z

0

You should set data using .data()

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

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

answered Mar 26, 2014 at 6:11

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

Felix · Accepted Answer · 2014-03-26 06:12:02Z

0

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

answered Mar 26, 2014 at 6:12

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Arun P Johny · Accepted Answer · 2014-03-26 06:18:50Z

0

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

edited Mar 26, 2014 at 6:18

answered Mar 26, 2014 at 6:12

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Meshu Deb Nath · Accepted Answer · 2023-01-21 01:21:23Z

0

Just use

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

answered Jan 21, 2023 at 1:21

Meshu Deb Nath

1511 gold badge2 silver badges10 bronze badges

2 Comments

Shawn Hemelstrand Over a year ago

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

Meshu Deb Nath Over a year ago

Thanks @ShawnHemelstrand for the suggestion. Will try to add some explanation :)

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related