JQuery .data() не работает?

Question

Недавно я кодировал прочь, и я столкнулся с странной проблемой. Я пытался назначить атрибут данных для нового элемента, который я создал (через jQuery), только чтобы обнаружить, что он фактически не назначил атрибут. Смотрите по ссылке ниже для примера, код приведен ниже:

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

Любая идея, почему это происходит? Я никогда не наткнулся на это ...

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

Answer 1

data не data-* установить атрибуты. Он управляет кэшем данных, не связанным с атрибутами data-*. Он инициализирует от data-* атрибутов, если они есть, но никогда не записываются на них. Чтобы записать атрибут, используйте attr.

Пример: Updated Fiddle

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

То, что вы видите, это лишь один из многих способов, это может быть удивительно. Другой является то, что если ваша разметка <div id="elm" data-foo="bar"></div> и в какой-то момент вы используете $("#elm").data("foo"), чтобы получить значение (и это действительно будет "bar"), то вы $("#elm").data("foo", "update") атрибут остается data-foo="bar", но данные, управляемые data теперь foo равным "update". Но приведенное выше правило объясняет это следующим образом: data никогда пишет - data-* attrs.

Answer 2

jQuery импортирует атрибуты data-, когда элемент загружен, но после этого не получает доступа. Элементы сохраняются в внутренней структуре jQuery. От the API:

В data- атрибуты не втягиваются в первый раз свойство осуществляется доступ к данным, а затем больше не доступны или мутантный (все значения данных затем сохраняются внутри JQuery).