요소 데이터가 변경 될 때 jQuery의 data() 특성이 업데이트되지 않습니다.

Question

jQuery의 data() api를 사용하여 요소의 모든 데이터 특성을 검색하고 싶습니다. 하지만이 API의 캐시 특성은 실제로 성가신 일입니다. 때로는 자바 스크립트에서 요소의 일부 데이터 속성을 변경해야하지만 data() API는 항상 각 데이터 속성의 초기 값을 반환합니다. 따라서 attr()을 사용하여 요소의 각 데이터 속성에 액세스하여 최신 값을 가져와야합니다. 이 캐시를 극복하고 data()을 호출 할 때마다 항상 최신 값을 반환하는 방법이 있습니까?

Answer 1

짧은 답변 : 데이터 속성이 항상 jQuery에 의해 설정된다는 것을 보장 할 수 없다면, 동적으로 설정된 데이터 속성에 대해 jQuery .data()를 사용하지 마십시오.

아래

어느 솔루션은 작동합니다

• 사용 DOM을 대신
• 사용의 jQuery .attr()를 대신

을 여기 정말 생각하지 않는 relevant part from the jQuery documentation이 (얼마나 많은이 하이라이트입니다 jQuery 사용자를 놀라게 할 수 있습니다.) :

데이터 속성은 처음으로 d 속성에 액세스 한 다음 더 이상 액세스하거나 변경하지 않습니다 (모든 데이터 값은 jQuery에 내부적으로 저장됩니다). 많은 클라이언트 측 템플릿 언어는 데이터 속성을 포함, DOM을 제작할 수 있습니다 하지 사용 jQuery를이 속성을 설정하는 이유에 대해서는

.

DevTools로 같이 (동적으로 내장 된 HTML을 감안할 때 :

document.querySelector('form').getAttribute('data-test'); 

JQuery와이에 (만료 된 이전 값을 반환 :

<form data-test="300" ... 

DOM API는 진실을 말한다 케이스, 19000) :

$('form').data('test'); 

jQuery attr

$('form').attr('data-amount'); 

Answer 2

또한 데이터 캐시를 재설정 속성을 업데이트 한 후 jQuery의 .removeData() 방법을 사용할 수 있습니다 : 현재 값을 eturn. 예를 들어

:

> document.querySelector('.sub-panels') 
<div class=​"sub-panels">​…​</div>​ 

> document.querySelector('.sub-panels').setAttribute('data-test', 300); 
undefined 

> document.querySelector('.sub-panels') 
<div class=​"sub-panels" data-test="300">​…​</div>​ 

> $('.sub-panels').data('test') 
300 

> document.querySelector('.sub-panels').setAttribute('data-test', 400); 
undefined 

> $('.sub-panels').data('test') 
300 

> $('.sub-panels').removeData(); 
[div.sub-panels, prevObject: jQuery.fn.init(1), context: document, selector: ".sub-panels"] 

> $('.sub-panels').data('test') 
400