jQuery .data()方法未添加data属性的原因及解决方法

这是个很常见的误解——jQuery的.data()方法并不会直接修改DOM元素的data-*属性，它是把数据存储在jQuery内部维护的一个缓存对象里，和DOM本身的属性是完全分开的。

具体原因： #

• 当你第一次调用.data()读取数据时，jQuery会先读取DOM上的data-*属性，把它们存入内部缓存；之后再访问.data()就直接从缓存取值，不会再去读取DOM。
• 反过来，当你用.data()设置数据时，只会更新这个内部缓存，不会同步修改DOM上的data-*属性，所以你在开发者工具里看不到这些属性的变化。

实现你的需求（在DOM上添加data-*属性）： #

如果你确实需要在DOM元素上直观看到这些data-*属性，应该使用.attr()方法来设置，而不是.data()：

$(function(){
  $("div").attr({
    "data-one": 1,
    "data-two": 2
  });
})

执行这段代码后，DOM元素就会变成你期望的样子：

<div data-one="1" data-two="2">what ever</div>

补充说明： #

如果你既需要把数据存在jQuery缓存里，又需要同步更新DOM属性，可以先调用.data()，再手动用.attr()同步，但一般来说没必要——只有当你需要让这些属性被其他非jQuery的代码读取，或者需要在DOM结构中直观看到时，才需要这么做。大多数场景下，使用.data()存储数据已经足够：它性能更好，还能存储复杂类型的数据（比如对象、数组），而data-*属性只能存储字符串。

内容的提问来源于stack exchange，提问作者Martin AJ