當元素數據發生變化時，jQuery的data（）屬性不會更新

我想用jQuery的data() api檢索元素的所有數據屬性。但是這個API的緩存特性真的很煩人。有時我需要在JavaScript中更改某個元素的某些數據屬性，但data() api始終返回每個數據屬性的初始值。因此，我必須使用attr()來訪問元素的每個數據屬性以獲取其最新值。有沒有什麼辦法來克服這個緩存的事情，並讓data()總是返回每次我打電話時的最新值？當元素數據發生變化時，jQuery的data（）屬性不會更新

來源

2014-02-05 chaonextdoor

這不是一個緩存的事情，'數據（）'將數據存儲在內部，並且不改變數據的屬性，如果你要改變你應該使用'某種原因屬性attr（）'，但如果您一直使用'data（）'來設置和獲取數據，那麼這不應該成爲問題，因爲您會得到正確的數據。 – adeneo

_「有時我需要改變JavaScript中某個元素的某些數據屬性」_ - 爲什麼？如果您需要在頁面加載後針對元素存儲數據，則可以使用'.data（'key'，'value'）'。這不會將數據存儲爲屬性，但那又如何？ – nnnnnn

@nnnnnn每個客戶端模板語言都會構建DOM，其中可能包含數據屬性，並且很可能不會使用jQuery。 – mikemaccana

簡短的回答是：不要使用jQuery .data（）來動態設置數據屬性，除非您可以保證數據屬性總是由jQuery設置。

下面

兩種解決方案將工作：

使用DOM，而不是
使用jQuery .attr（），而不是

這裏的relevant part from the jQuery documentation（我不認爲真正凸顯這個多少錢可能會驚訝jQuery用戶）：

數據屬性被拉第一次d ata屬性被訪問，然後不再被訪問或變異（所有的數據值，然後內部存儲在jQuery）。

至於爲什麼你可能不使用 jQuery來設置屬性：許多客戶端模板語言構建DOM，包括數據屬性。

鑑於動態生成HTML（如圖DevTools：

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

DOM API道出了實情：

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

JQuery的返回了過期前值（在此19000）：

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

jQuery attr也r E打開當前值：

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

來源

2015-01-27 17:40:29 mikemaccana

您還可以使用jQuery的.removeData()方法更新數據屬性重置其緩存後。

例如：

> 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

來源

2017-04-26 19:42:46

當元素數據發生變化時，jQuery的data（）屬性不會更新

回答

相關問題