jQuery not return updated data-value

Question

click on first green button
click check price button, return right? okay
click second green button, then click again check price, return wrong! why?

$('button.setprice').click(function() {
  var txt = $(this).text();
  $('.price').text(txt).attr('data-price', txt);
});

$('.check').on('click',function(){
  alert($('.price').data('price'))
});

.setprice {
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price"></div>

<button class="setprice">1000</button>
<button class="setprice">2000</button>
<br/>
<button class="check">check price</button>

Does this answer your question? [jQuery .data() does not work, but .attr() does](https://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does/8708345#8708345) — 0stone0, Oct 18 '21 at 13:46
`attr()` reads from the DOM, `data()` reads from a cache in memory which jQuery holds. You need to use the ***same method as getter and setter***. You cannot mix and match. — Rory McCrossan, Oct 18 '21 at 13:47
Thanks everyone, now I understand what was my problem, regard — Jack The Baker, Oct 18 '21 at 13:48

score 1 · Answer 1 · answered Oct 18 '21 at 13:44

Apparently, you can't mix data() and attr() functions. It is well explained in this answer: https://stackoverflow.com/a/8708345/3785618

Since .data() does extra processing jQuery stores the results of attribute evaluation in $.cache - after all, once a data attribute has been evaluated it would be wasteful to re-evaluate on every .data() call - especially since data variables can contain complex JSON strings.

Although, this will work:

$('button.setprice').click(function() {
  var txt = $(this).text();
  $('.price').text(txt).data('price', txt);
});

$('.check').on('click',function(){
  alert($('.price').data('price'))
});

.setprice {
background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price"></div>

<button class="setprice">1000</button>
<button class="setprice">2000</button>
<br/>
<button class="check">check price</button>

jQuery not return updated data-value

1 Answers1