如何在尚未在 DOM 中的元素上使用 jQuery 设置数据属性？答案

【问题标题】：How to set data attribute with jQuery on element that is not in DOM yet?如何在尚未在 DOM 中的元素上使用 jQuery 设置数据属性？
【发布时间】：2014-04-23 04:17:16
【问题描述】：

如何使用 jQuery 为尚未在 DOM 中的元素设置数据属性？

代码：

   var panelHeading = $('<div/>', {class:'panel-heading', href:'#'+username+'PanelContent'});
   panelHeading.data('toggle', 'collapse').data('target',"#"+username+"PanelContent");

当我将数据属性附加到文档时，它不会出现。确实会出现其他属性。

【问题讨论】：

为什么不在初始声明中设置它们？ , data-toggle: "collapse"
请注意class 是保留关键字。

标签： javascript jquery html jquery-data

【解决方案1】：

jQuery 的data() 方法没有设置HTML5 的data- 属性，它实际上将高级数据存储在DOM 元素中。您可以使用 data() 存储无法使用属性的复杂对象和函数。

如果确实必须设置属性，请使用attr('data-toggle','collapse') 等。但正如前面评论中提到的，为什么不直接在初始声明中设置呢？

【讨论】：

【解决方案2】：

创建元素时可以添加数据属性

var panelHeading = $('<div />', {
    'class'       : 'panel-heading', 
    href          : '#'+username+'PanelContent',
    'data-toggle' : 'collapse',
    'data-target' : '#'+username+'PanelContent'
});

使用data() 将数据在内部存储在 jQuery 中，它不会创建 HTML 属性，因此它与 Bootstrap 之类的属性效果不佳

【讨论】：

【解决方案3】：

你可以使用：

var panelHeading = $('<div data-target="' + '#'
    + username + 'PanelContent' + '"/>');

【讨论】：