JQuery .data() non funziona?

Question

Recentemente stavo programmando il codice e mi sono imbattuto in un problema strano. Stavo tentando di assegnare un attributo dati a un nuovo elemento che avevo creato (tramite jQuery), solo per scoprire che non avrebbe effettivamente assegnato l'attributo. Vedere sul link qui sotto per un esempio, il codice è riportato di seguito:

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

Qualsiasi idea del perché questo sta accadendo? Non ho mai imbattuto in questo ...

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

Answer 1

data non impostaredata-* attributi. Gestisce una cache di dati non correlata agli attributi data-*. Esso inizializza da data-* attributi se sono presenti, ma non li scrive mai. Per scrivere su un attributo, utilizzare attr.

Esempio: Updated Fiddle

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

Quello che stai vedendo è solo uno dei molti modi in cui questo può essere sorprendente. Un altro è che se il markup è <div id="elm" data-foo="bar"></div> e ad un certo punto si utilizza $("#elm").data("foo") per ottenere il valore (e sarà davvero "bar"), poi si fa $("#elm").data("foo", "update"), l'attributo rimane data-foo="bar" ma i dati gestiti da data ora ha foo pari a "update". Ma la regola sopra lo spiega: data mai scrive a data-* attrs.

Answer 2

jQuery importa gli attributi data- quando l'elemento viene caricato, ma non lo accede in seguito. Gli elementi sono memorizzati in una struttura interna jQuery. Da the API:

I data- attributi sono tirati in un primo tempo la proprietà dei dati si accede e quindi non sono più accessibili o mutato (tutti i valori dei dati vengono poi memorizzati internamente in jQuery).