更新HTMLデータが正しく属性が、ページ

Question

に表示されていない変更は、私はこのHTMLを持っている：

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

私はデータを変更するいくつかのjqueryのは、「何でも」「テスト」への変更

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

sucessfullyすなわち属性きました

Chromeでページを検査すると、データ属性は更新されていません。印刷できますが、新しい値は検査できません。非常に混乱。何か案は？ここ

あなたはこのコードを持っているあなたのフィドルでfiddle

Answer 1

データは、要素（使用attrまたはそのための小道具）に保存されていない見てみましょう。代わりに、jQueryは$ .cacheにそれを保持します。

Answer 2

です。 $('#query')が関数呼び出しであり、あなたはそれに.data('source', 'test')の応答をassingingされているので、エラー（「割り当てに無効な左辺」）を有する

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

。

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

へ

変更それはそれが正常に動作します。

は http://jsfiddle.net/r5YV9/10/

Answer 3

データ属性を使ってスタイルを適用するような気がしている場合は、jQueryのキャッシュとを更新する必要があります。私はいつもで、jQueryの変数の前に$を置く：

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

data($element, key, value); 

注両方を行う方法にDOMを更新しません

jQueryのうちスワップ

$element.data(key, value); 

誰かがそれについて混乱している。 ;）