Question

所以我基本上是在动态添加一些元素到DOM。我可以在它们存在之前使用类似.addClass的方法，并且该类与元素一起附加到DOM，但是当我使用.data（）方法添加数据属性时，数据不会附加到DOM与元素。我在这里遗漏了什么，或者我真的要等到DOM中的元素存在才能向它添加数据吗？

PS。使用jquery 1.9.1

HERES A FIDDLE FOR YOU TO PLAY WITH

JS

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>

干杯。

Answer 1

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

如果您需要设置明确的[data-*]属性值（例如CSS的样式挂钩），那么您需要使用.attr()

Answer 2

这似乎对我有用，

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

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

在jquery中将数据属性添加到尚未插入DOM的元素中

2 个答案: