更新HTML數據正確歸屬，但沒有被

Question

頁

上顯示的變化我有這樣的HTML：

<input type="text" id="query" data-source="whatever"> 

我有一些jQuery的改變數據成功地屬性，即「什麼」變爲「測試」

$(function() { 
    $('#query').data('source', 'test'); 
    console.log($('#query').data()); 
}); 

但如果我使用Chrome檢查頁面，數據屬性尚未更新..我可以打印它，但我無法檢查新值！非常混亂。有任何想法嗎？

這裏是fiddle

Answer 1

的數據不被存儲在元件（使用ATTR或丙爲該）上。相反，jQuery將其保存在$ .cache中。

Answer 2

在你的小提琴，你有這樣的代碼。

$(function() { 
    $('#query') = $('#query').data('source', 'test'); 
    console.log($('#query').data()); 
}); 

其中有錯誤（「在分配無效左側」），因爲$('#query')是一個函數調用，你是assinging的.data('source', 'test')它的響應。

將其更改爲

$(function() { 
    $('#query').data('source', 'test'); 
    console.log($('#query').data()); 
}); 

它將很好地工作。

看一看http://jsfiddle.net/r5YV9/10/

Answer 3

如果你在做任何瘋狂的事情，比如使用data屬性來應用樣式（不，它並不瘋狂），那麼你需要同時更新jQuery的緩存和。

換出了jQuery

$element.data(key, value); 

這不會在DOM更新到執行都

var data = function($element, key, value) { 
    $element.data(key, value); 
    $element.attr('data-'+key, value); 
} 

data($element, key, value); 

注方法：我總是把$ jQuery的變量的前面，任何人都會對此感到困惑。 ;）