Недавно я кодировался, и у меня возникла странная проблема. Я пытался назначить атрибут данных для нового элемента, который я создал (через jQuery), только чтобы обнаружить, что он фактически не назначил атрибут. См. Приведенную ниже ссылку, приведенный ниже код:
http://jsfiddle.net/y95p100c/1/
Любая идея, почему это происходит? Я никогда не спотыкался с этим...
var div = $("<div />")
$(div).data("foo", "bar")
console.log($(div)[0].outerHTML) // prints <div></div>
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.
jQuery импортирует атрибуты data-, когда элемент загружен, но после этого не получает доступа. Элементы сохраняются в внутренней структуре jQuery. Из API:
Атрибуты
data-вытаскиваются при первом доступе к ресурсу данных, а затем больше не доступны или не изменяются (все значения данных затем сохраняются внутри jQuery).