change - jquery data attribute selector

JQuery.data() no funciona?

Question

Recientemente estaba codificando y me encontré con un problema extraño. Intenté asignar un atributo de datos a un nuevo elemento que había creado (a través de jQuery), solo para descubrir que en realidad no asignaría el atributo. Consulte el siguiente enlace para ver un ejemplo, el código se enumera a continuación:

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

¿Alguna idea de por qué está sucediendo esto? Nunca me he encontrado con esto ...

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

Answer 1

jQuery importa los atributos de data- cuando se carga el elemento, pero no accede a él después. Los elementos se almacenan en una estructura interna jQuery. De la API :

Los atributos de data- se extraen la primera vez que se accede a la propiedad de datos y luego ya no se accede ni se muta (todos los valores de datos se almacenan internamente en jQuery).

Answer 2

data no establecen los atributos data-* . Gestiona un caché de datos no relacionado con los atributos data-* . Se inicializa a partir de los atributos data-* si hay alguno presente, pero nunca los escribe. Para escribir en un atributo, use attr .

Ejemplo: Fiddle actualizado

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

Lo que estás viendo es solo una de las muchas formas en que esto puede ser sorprendente. Otra es que si su marcado es <div id="elm" data-foo="bar"></div> y en algún momento usa $("#elm").data("foo") para obtener el valor (y de hecho será "bar" ), luego haces $("#elm").data("foo", "update") , el atributo sigue siendo data-foo="bar" pero los datos administrados por data ahora tiene foo igual a "update" . Pero la regla anterior lo explica: los data nunca se escriben en data-* attrs.