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

Posted 2023-05-08

【中文标题】如何在尚未在 DOM 中的元素上使用 jQuery 设置数据属性？

【英文标题】：How to set data attribute with jQuery on element that is not in DOM yet?

【发布时间】：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 是保留关键字。

【参考方案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' + '"/>');