web-dev-qa-db-fra.com

JQuery .data () ne fonctionne pas?

Récemment, je codais et j'ai rencontré un problème étrange. J'essayais d'attribuer un attribut de données à un nouvel élément que j'avais créé (via jQuery), seulement pour découvrir qu'il n'attribuerait pas réellement l'attribut. Voir le lien ci-dessous pour un exemple, le code est répertorié ci-dessous:

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

Une idée pourquoi cela se produit? Je ne suis jamais tombé sur ça ...

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

data ne définit pas les attributs data-*. Il gère un cache de données sans rapport avec les attributs data-*. Il initialise à partir des attributs data-* S'il y en a, mais ne les écrit jamais. Pour écrire dans un attribut, utilisez attr.

Exemple: Fiddle mis à jour

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

Ce que vous voyez n'est qu'une des nombreuses façons dont cela peut être surprenant. Un autre est que si votre balisage est <div id="Elm" data-foo="bar"></div> Et à un moment donné vous utilisez $("#Elm").data("foo") pour obtenir la valeur (et ce sera effectivement "bar"), Alors vous faites $("#Elm").data("foo", "update"), l'attribut reste data-foo="bar" mais les données gérées par data ont maintenant foo égal à "update". Mais la règle ci-dessus l'explique: data never écrit dans data-* Attrs.

125
T.J. Crowder

jQuery importe le data- attribue lorsque l'élément est chargé, mais n'y accède pas par la suite. Les éléments sont stockés dans une structure interne jQuery. De l'API :

Le data- les attributs sont extraits la première fois que la propriété data est accédée, puis ne sont plus accessibles ou mutés (toutes les valeurs de données sont ensuite stockées en interne dans jQuery).

23
lonesomeday