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

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

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

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

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

Ответы

Ответ 1

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

Пример: Обновлен скрипт

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.

Ответ 2

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

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