当元素数据发生变化时，jQuery的data（）属性不会更新

我想使用jQuery的data() api来检索元素的所有数据属性。 但是这个api的缓存性质真的很烦人。 有时我需要在javascript中更改元素的某些数据属性，但data() api始终返回每个数据属性的初始值。 所以我必须使用attr()来访问元素的每个数据属性以获取其最新值。 有没有办法克服这个缓存的事情，并使data()每次调用时总是返回最新的值？

Answer 1

简短的回答是： 不要使用jQuery .data（）来动态设置数据属性，除非你能保证数据属性总是由jQuery设置 。

以下任一解决方案都可行：

• 改用DOM
• 请改用jQuery .attr（）

这是jQuery文档中的相关部分 （我不认为它真的突出了这可能会让jQuery用户感到惊讶）：

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（ 然后所有数据值都在内部存储在jQuery中 ）。

关于为什么你可能不使用jQuery来设置属性：许多客户端模板语言构建DOM，包括数据属性。

给定动态构建的HTML（如DevTools中所示：

DOM API说实话：

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

JQuery 返回一个过时的先前值 （在本例中为19000）：

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

jQuery attr也返回当前值：

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

Answer 2

在更新data属性以重置其缓存之后，您还可以使用jQuery的.removeData（）方法。

例如：

 > document.querySelector('.sub-panels') 
​…​
​ > document.querySelector('.sub-panels').setAttribute('data-test', 300); undefined > document.querySelector('.sub-panels') 
​…​
​ > $('.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