Кто объяснит этот феномен?

Question

[seredaes]

Ссылка на пример

JS код говорит, что все атрибут изменен и даже выводит новое значение, но физически ничего не меняется...
Если посмотреть код, атрибут data-id по прежнему 12, как такое может быть?

Answer 1

[DevMan]

учите матчасть: data-атрибуты сторятся НЕ в элементе.

Answer 2

[Антон]

data в jquery работает по-своему, а исходные значения берет из data-* аттрибутов. Для изменения аттрибутов напрямую их надо менять через attr('data-x', val)

Answer 3

[mletov]

Чтобы менялся Html:

alert($("#www").attr("data-id"));
$("#www").attr("data-id","www");
alert($("#www").attr("data-id"));

Что касается data, то подозреваю, что он хранит свои значения за пределами элемента, к которому применяется.

Answer 4

[Алексей]

А что вы ожидали увидеть? JS модифицирует DOM модель, но не исходники, лежащие на сервере.

Comments

[DevMan]

не в этом дело: консоль показывает текущее состояние, а не исходный код.

[Алексей]

Попробуйте .attr("data-id") вместо .data("id").

[Алексей]

habrahabr.ru/post/139210
"Один минус (а может и не минус) — это то, что в data() сохранится только изначальное значение (кешируется), и если мы изменим значение атрибута (например, через .attr(‘data-foo-bar’, 456)), то получая .data('fooBar') увидим наше старое значение."

Answer 5

[Zhainar]

Потому что атрибут data-{name} и функция data({name}) это разные вещи.
Если у элемента не указан element.data({name}, value), то jquery берет значение из атрибута.