jQuery not return updated data-value [duplicate]

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 — 0stone0
– 0stone0, Commented Oct 18, 2021 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
– Rory McCrossan, Commented Oct 18, 2021 at 13:47
Thanks everyone, now I understand what was my problem, regard — Jack The Baker
– Jack The Baker, Commented Oct 18, 2021 at 13:48

Maksim I. Kuzmin · Accepted Answer · 2021-10-18 13:44:34Z

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>

Collectives™ on Stack Overflow

jQuery not return updated data-value [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related