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

Question

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

代码：

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

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

Answer 1

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

如果你真的必须设置一个属性，使用attr('data-toggle','collapse')之类的。但是正如之前的评论中提到的，为什么不直接在初始声明中设置呢？

Answer 2

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

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

usingdata()将数据内部存储在 jQuery 中，它不会创建 HTML 属性，因此它与 Bootstrap 之类的属性的效果相当差

Answer 3

您可以使用：

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