jQuery .data()与.html()的区别

Question

奇怪的问题-也许我漏了什么。

我的代码:

HTML

<div id="container">
    <span data-foo="initial content">Blabla</span>    
</div>

jQuery

console.log($("span").data("foo")); //initial content
console.log($("#container").html()); //<span data-foo="initial content">Blabla</span>   

$("span").data("foo", "new content");

console.log($("span").data("foo")); //new content
console.log($("#container").html()); //<span data-foo="initial content">Blabla</span>   <----- ?!?!?!?!

非常后面的那一行显示了意外的行为。之前使用 .data("foo", "new content") 进行的修改，通过 .html() 读取内容时不会反映出来。 示例代码: http://jsfiddle.net/sSZjh/

- David Müller

Answer 1

.data 在 jQuery 中只能读取 data- 属性，但不能设置它们。你需要使用 .attr('data-...') 来设置数据属性。

从 jQuery 1.4.3 开始，HTML5 的 data- 属性将自动被引入到 jQuery 的数据对象中。在 jQuery 1.6 中，嵌有破折号的属性的处理方式已更改，以符合 W3C HTML5 规范。

来自 http://api.jquery.com/data/

- Dogbert

Answer 2

jQuery在使用data属性存储数据时，实际上不会更新HTML。视觉属性可用于设置属性的初始数据值，除此之外，jQuery只是将该值缓存在DOM节点对象中。

- David Barker