.data로 업데이트되지 않는 JQuery 데이터 선택기

.data로 업데이트되지 않는 JQuery 데이터 선택기

---

기본적으로 data-test속성이 있는 페이지에 div를로드 하고 jquery로 값을 변경하면 .data('test')더 이상 요소를 선택할 수 없습니다.$('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 .data ()는 처음에는 data-속성의 값으로 채워지 지만이를 설정하면 연관된 새 값만 메모리에 저장됩니다. DOM의 속성을 변경하지 않습니다. 속성을 변경하려면 다음을 사용해야합니다.

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

문서는 http://api.jquery.com/jQuery.data/에 있습니다.

---

.data()모든 속성이 변경되지 않았는지 확인하면 jQuery 내부의 특수 캐시 개체 를 사용하여 데이터를 저장 한다고 생각하기 때문입니다 (실제로는 개체 또는 복잡한 데이터 팁도 저장할 수 있음). 속성을 변경하려면attr()

참고 URL : https://stackoverflow.com/questions/9768165/jquery-data-selector-not-updating-with-data