使用 DOM 中定义的 html5 数据属性创建新元素

Question

我想创建一个定义了 html5 数据属性的新元素，但是它们没有显示在 DOM 中（与使用 .addClass 时不同）。这是预期的行为吗？

这会创建一个元素没有 data-foo 属性：

-> $("<div>foo</div>").data('foo', 'bar').addClass('class')
=> <div class="class">foo</div>

我必须在构造函数中声明它

-> $("<div data-foo='bar'>foo</div>").addClass('class')
=> <div class="class" data-foo="bar">foo</div>

.data 方法不应该同样工作吗？

Answer 1

从这里开始：

• http://www.learningjquery.com/2011/09/using-jquerys-data-apis

4。任何 jQuery 数据 API 都不会更改 HTML5 data-* 属性。

.data() 和 .removeData() 的大多数用法仍然是原始的 目的是将数据与内存中的 DOM 元素相关联。更新 DOM 每次更改数据时的属性都会减慢速度 好理由。此外，甚至不可能序列化所有数据类型 可能附加到 DOM 元素，例如函数、引用 到其他 DOM 元素或自定义 JavaScript 对象。

规则：要更新或删除 HTML5 data-* 属性，请使用 jQuery 的 .attr() 或 .removeAttr() 方法。

所以，使用通常的attr...