JQuery .data()不工作？

Question

最近我编码了,我遇到了一个奇怪的问题.我试图将数据属性分配给我创建的新元素(通过jQuery),但却发现它实际上不会分配属性.有关示例,请参阅以下链接,代码如下:

http://jsfiddle.net/y95p100c/1/

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

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

Answer 1

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

示例:更新了小提琴

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.

Answer 2

jQuery在data-加载元素时导入属性,但之后不再访问它.元素存储在jQuery内部结构中.来自API:

的data-属性在第一次拉动数据属性被访问,然后不再访问或突变的(所有数据值然后被存储在内部的jQuery).