JQuery .data() 不工作？答案

【问题标题】：JQuery .data() not working?JQuery .data() 不工作？
【发布时间】：2014-09-16 18:47:59
【问题描述】：

最近我在编写代码时遇到了一个奇怪的问题。我试图将数据属性分配给我创建的新元素（通过 jQuery），但发现它实际上并没有分配该属性。示例见以下链接，代码如下：

知道为什么会这样吗？我从来没有偶然发现过这个......

var div = $("<div />")
$(div).data("foo", "bar")
console.log($(div)[0].outerHTML) // prints <div></div>

【问题讨论】：

jQuery 的 .data() 函数在内部存储值。

标签： jquery custom-data-attribute

【解决方案1】：

data 不设置 data-* 属性。它管理与data-* 属性无关的数据缓存。如果存在任何属性，它初始化 data-* 属性，但从不写入它们。要写入属性，请使用attr。

示例：Updated Fiddle

var div = $("<div />")
$(div).attr("data-foo", "bar")
console.log($(div)[0].outerHTML)

您所看到的只是令人惊讶的众多方式之一。另一个是，如果您的标记是<div id="elm" data-foo="bar"></div>，并且在某些时候您使用$("#elm").data("foo") 来获取值（它确实是"bar"），那么您执行$("#elm").data("foo", "update")，属性仍然是data-foo="bar"，但数据由data 管理现在有foo 等于"update"。但上面的规则解释了这一点：data 从不写入到data-* attrs。

【讨论】：

有趣，我也尝试过 .prop() ，但它也失败了。谢谢！
@user1143682：那是因为属性不是属性。 :-) 只是很多预定义的属性都有反映属性（id、className、rel、src，...）。（prop 可能确实在div 元素上创建了一个属性，但是当您查看outerHTML 时，它们并没有被序列化，因为它们不是 HTML。）
遇到了同样的问题；很好的答案，帮助我澄清了。
@Spets：虽然 jQuery 确实存在 API 问题（这就是其中之一），但我认为 71.4% of all websites globally 使用的库很难说是“失宠”。但是，如果 jQuery 确实开始失去份额，我认为这很可能，我认为这不会归结于它的 API，而是以 React、Angular 的形式出现在 MVC/MVVM/choose-your-favorite-acronym-here， Vue、Ember、...
想知道我会忘记多少次，然后继续回来看看我已经对这个问题\答案投了赞成票。

【解决方案2】：

jQuery 在加载元素时导入 data- 属性，但之后不会访问它。元素存储在 jQuery 内部结构中。来自the API：

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

【讨论】：