webentwicklung-frage-antwort-db.com.de

JQuery .data () funktioniert nicht?

Vor kurzem war ich weg, und ich stieß auf ein seltsames Problem. Ich habe versucht, einem neuen Element, das ich erstellt hatte (über jQuery), ein Datenattribut zuzuweisen, nur um festzustellen, dass es das Attribut nicht wirklich zuweisen würde. Ein Beispiel finden Sie unter dem folgenden Link. Der Code ist unten aufgeführt:

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

Irgendeine Idee, warum das passiert? Ich bin noch nie darauf gestoßen ...

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

data setzt keine data-* Attribute. Es verwaltet einen Datencache, der nichts mit data-* - Attributen zu tun hat. Es initialisiert aus data-* - Attributen, falls vorhanden, schreibt aber nie in diese. Verwenden Sie attr, um in ein Attribut zu schreiben.

Beispiel: pdated Fiddle

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

Was Sie sehen, ist nur eine von vielen Möglichkeiten, die Sie überraschen können. Eine andere Möglichkeit ist, dass Sie, wenn Ihr Markup <div id="Elm" data-foo="bar"></div> Ist und Sie irgendwann $("#Elm").data("foo") verwenden, um den Wert zu erhalten (und es wird tatsächlich "bar" Sein), $("#Elm").data("foo", "update"), das Attribut bleibt data-foo="bar", aber die von data verwalteten Daten haben jetzt foo gleich "update". Aber die obige Regel erklärt es: data schreibt niemals in data-* Attrs.

125
T.J. Crowder

jQuery importiert das data- Attribute, wenn das Element geladen wird, aber danach nicht darauf zugreift. Die Elemente werden in einer internen jQuery-Struktur gespeichert. Von der API :

Das data- -Attribute werden beim ersten Zugriff auf die Dateneigenschaft abgerufen und dann nicht mehr aufgerufen oder mutiert (alle Datenwerte werden dann intern in jQuery gespeichert).

23
lonesomeday