JQuery data selector not updating with .data

Question

Basically if I have a div loaded onto a page with a data-test attribute and change the value of it with jquery's .data('test') I can no longer select the element with $('div[data-test="newValue"]')

var howMany = $('.t[data-test="test"]').length;
$('.result').html('start there are ' + howMany + ' divs with data "test"<br /><br />');
setTimeout(function() {
  $('#one, #three').data('test', 'changed');
}, 500);
setTimeout(function() {
  var test = $('.t[data-test="test"]').length,
    changed = $('.t[data-test="changed"]').length;
  $('.result').append('there are ' + test + ' divs still with data "test"<br /><br />there are ' + changed + ' divs still with data "changed"<br /><br />');
}, 1000);
setTimeout(function() {
  $('.t').each(function() {
    $('.result').append('div #' + $(this).attr('id') + ' has the test data of: ' + $(this).data('test') + '<br /><br />');
  });
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t" id="one" data-test="test">1</div>
<div class="t" id="two" data-test="test">2</div>
<div class="t" id="three" data-test="test">3</div>
<div class="t" id="four" data-test="test">4</div>
<div class="result"></div>

This might help archive.plugins.jquery.com/project/dataSelector — altschuler
– altschuler, Commented Mar 19, 2012 at 10:06

Ben Lee · Accepted Answer · 2012-03-19 10:03:46Z

210

jQuery .data() is initially populated with values from the data- attributes, but setting it only stores the associated new value in memory. It doesn't change the attribute in the DOM. To change the attribute, you have to use:

$('#one, #three').attr('data-test', 'changed');

The docs are at http://api.jquery.com/jQuery.data/

answered Mar 19, 2012 at 10:03

Ben Lee

53.5k15 gold badges129 silver badges146 bronze badges

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

9 Comments

Adam Merrifield Over a year ago

Okay, so .data doesn't actually manipulate the DOM it just keeps the data in memory?

Ben Lee Over a year ago

It can be used on any element and can store arbitrary data (not just strings). The only way it relates to the "data-" attributes is that for convenience it is automatically populated with these strings to begin with.

pat capozzi Over a year ago

WOW this was making me crazy. I could test in chrome dev tools and see the value but look on the page and not see anything changed. Very frustrating especially since the jquery docs say that you can make changes but do not mention this idiosyncrasy.

M H Over a year ago

Who decided "setting it only stores the associated new value in memory. It doesn't change the attribute in the DOM."? That seems very strange functionality. Why not keep it updated.

PleasantD Over a year ago

Not only that, after the cache has been initialized it won't go and update. So, for instance, if you make a call to .data() and then later set or change data attributes then future calls for .data() for the same element will not reflect these new values. Modified values will never be pulled into the cache and new values will not appear unless asked for by name .data('foo').

|

Nicola Peluchetti · Accepted Answer · 2012-03-19 10:02:31Z

15

That's because i think that .data() use a special cache object inside jQuery to store data (in fact you can evens store object or complex tipes of data), if you check all the attributes are unchanged. If you want to change the attribute, use attr()

answered Mar 19, 2012 at 10:02

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Collectives™ on Stack Overflow

JQuery data selector not updating with .data

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related