JQuery data selector not updating with .data
JqueryHtmlJquery SelectorsJquery Problem Overview
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>
Jquery Solutions
Solution 1 - Jquery
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/
Solution 2 - Jquery
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()