javascript - 当元素数据更改时，jQuery 的 data() 属性不会更新

Question

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

Answer 1

简短的回答是:不要使用 jQuery .data() 来动态设置数据属性，除非您可以保证数据属性始终由 jQuery 设置。

以下任一解决方案都有效:

• 改用 vanilla JS .getAttribute()
• 改用 jQuery .attr()

这是 relevant part from the jQuery documentation (我认为这并没有真正强调这可能会让 jQuery 用户感到惊讶):

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

关于您可能不使用 jQuery 设置属性的原因:许多客户端模板语言构建 DOM，包括数据属性。

给定动态构建的 HTML(如 DevTools 中所示:

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

DOM API 说实话:

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

JQuery 返回一个过时的先前值(在本例中为 19000):

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

jQuery attr 返回当前值:

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

Vanilla JS getAttribute() 返回当前值:

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