4

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

PS。使用 jquery 1.9.1

这是一个供您玩耍的小提琴

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>

干杯。

4

2 回答 2

21

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

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

于 2013-08-19T21:13:01.043 回答
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/

于 2013-08-19T21:03:07.300 回答