在jQuery中向尚未插入DOM的元素添加数据属性[重复]答案

【问题标题】：Adding data attributes to elements not yet inserted into DOM in jquery [duplicate]在jQuery中向尚未插入DOM的元素添加数据属性[重复]
【发布时间】：2013-08-21 18:59:51
【问题描述】：

所以我基本上是在运行中向 DOM 添加一些元素。我可以在它们存在之前对它们使用 .addClass 之类的方法，并且该类与元素一起附加到 DOM，但是当我使用 .data() 方法添加数据属性时，数据不会附加到DOM 与元素。我在这里遗漏了什么还是我真的必须等到元素存在于 DOM 中才能向其中添加数据？

PS。使用 jquery 1.9.1

HERES A FIDDLE FOR YOU TO PLAY WITH

var widget = $("<div>");
widget.addClass("banana");
widget.data('color', 'brown');
widget.appendTo('#container');

HTML

<div id="container">

</div>

那里有一些不错的 CSS，因此您知道在哪里单击以检查并查看未（或希望）添加的数据属性。

我的预期结果是

<div id="container">
    <div class="banana" data-color="brown"></div>
</div>

干杯。

【问题讨论】：

你确定吗？你试过记录吗？
@RicardoLohmann 当我检查元素时，我没有看到在 DOM 中添加到它的数据
@RicardoLohmann 但也许这只是一个奇怪的 jsfiddle 怪癖？
relevant
data attr 不用于随意创建节点。它只是用 DOM 证实了对象数据。如果您想明确设置某些内容，则必须使用 attr 。祝你好运！

标签： jquery html dom html5-canvas

【解决方案1】：

这似乎对我有用，

var widget = $("<div>");
widget.addClass("banana");
jQuery.data(widget, 'color', 'brown');
widget.appendTo('#container');
console.log(jQuery.data(widget));

更新小提琴：http://jsfiddle.net/rTfvG/3/

【讨论】：

当我检查元素时，我仍然看不到在 DOM 中添加到它的数据，但也许这是一个 jsfiddle 怪癖>
@Rooster，这不是 jsFiddle 的怪癖。数据在 DOM 中，但未显示在 [data-*] 属性中。

【解决方案2】：

.data() method 不会在 DOM 节点上创建 [data-*] 属性。它只是将数据对象与 DOM 节点相关联。它确实使用来自[data-*] 属性的值（如果存在）进行初始化，但这不是一回事。

如果你需要设置一个显式的[data-*]属性值（比如带有CSS的样式钩子），那么你需要使用.attr()

【讨论】：

啊。我知道了。在阅读了您发布的链接和这个答案后，我明白了我为什么感到困惑。我通常不以我在这里使用它的方式使用 .data() 。感谢您为我做研究！