web-dev-qa-db-ja.com

JQuery .data（）が機能していませんか？

最近、私はコーディングしていましたが、奇妙な問題に遭遇しました。 （jQueryを介して）作成した新しい要素にデータ属性を割り当てようとしましたが、実際には属性が割り当てられないことがわかりました。例については、以下のリンクを参照してください。コードは以下のとおりです。

http://jsfiddle.net/y95p100c/1/

なぜこれが起こっているのでしょうか？私はこれにつまずいたことがありません...

var div = $("<div />")
$(div).data("foo", "bar")
console.log($(div)[0].outerHTML) // prints <div></div>
jquerycustom-data-attribute
51
user1143682

dataは、set_data-*_属性を設定しません。 _data-*_属性とは無関係のデータキャッシュを管理します。存在する場合は_data-*_属性からinitializesしますが、決して書き込みません。属性に書き込むには、attrを使用します。

例： 更新されたフィドル

_var div = $("<div />")
$(div).attr("data-foo", "bar")
console.log($(div)[0].outerHTML)
_

あなたが見ているものは、これが驚くべき多くの方法のうちの1つにすぎません。もう1つは、マークアップが_<div id="Elm" data-foo="bar"></div>_であり、ある時点で$("#Elm").data("foo")を使用して値を取得する場合（そして実際に_"bar"_になる場合）、$("#Elm").data("foo", "update")、属性は_data-foo="bar"_のままですが、dataで管理されるデータは_"update"_に等しいfooになりました。しかし、上記のルールはそれを説明しています：data neverwritesto _data-*_ attrs。

125
T.J. Crowder

jQueryはdata-属性は、要素がロードされたときに属性になりますが、その後はアクセスしません。要素はjQuery内部構造に格納されます。 API から：

data-属性は、データプロパティへの最初のアクセス時に取得され、その後アクセスまたは変更されなくなります（すべてのデータ値はjQueryに内部的に格納されます）。

23
lonesomeday