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

Question

所以我基本上是在动态添加一些元素到DOM.我可以对它们使用像.addClass方法存在之前,类与元素一起添加到DOM,但是当我使用.数据()方法来添加数据属性,则数据不被追加到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>

干杯.

Answer 1

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

如果需要设置显式[data-*]属性值(例如CSS的样式钩子),则需要使用.attr()