2013-05-05 72 views
4

奇怪的問題 - 也許我錯過了一些東西。jQuery .data()與.html()

我的代碼:

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/

回答

1

.data jQuery中只讀取data-屬性,但不進行設置。您需要使用.attr('data-...')來設置數據屬性。

從jQuery 1.4.3開始,HTML 5的數據屬性會自動引入到jQuery的數據對象中。在jQuery 1.6中修改了嵌入破折號屬性的處理方式,以符合W3C HTML5規範。

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

1

jQuery的,當你使用存儲數據的屬性數據實際上不更新HTML。您可以使用可視化屬性來設置屬性的iinitial數據值,除此之外,jQuery只是將值緩存到DOM節點對象。