javascript - 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/

Answer 1

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

从 jQuery 1.4.3 开始，HTML 5 的数据属性将被自动拉入到 jQuery 的数据对象中。jQuery 1.6 更改了对嵌入破折号的属性的处理，以符合 W3C HTML5 规范。

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

Answer 2

当您使用 data 属性存储数据时，jQuery 并不会真正更新 HTML。视觉属性可以让您设置属性的初始数据值，除此之外，jQuery 只是针对 DOM 节点对象缓存该值。