Как установить атрибут данных с помощью jQuery для элемента, которого еще нет в DOM?

Question

Как я могу установить атрибут данных с помощью jQuery для элемента, которого еще нет в DOM?

Код:

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

Атрибуты данных не отображаются, когда я добавляю их в документ. Другие атрибуты появляются.

Answer 1

Вы можете добавить атрибуты данных при создании элемента

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

с помощью data() хранит данные внутри в jQuery, он не создает атрибуты HTML, поэтому он плохо работает с атрибутами для таких вещей, как Bootstrap

Answer 2

JQuery-х data() метод не устанавливает HTML5 data- атрибуты, он на самом деле хранит данные высокого уровня в элементе DOM. Вы можете хранить сложные объекты и функции, используя data() что вы не можете использовать атрибуты.

Если вы действительно должны установить атрибут, используйте attr('data-toggle','collapse') и тому подобное. Но, как уже упоминалось в предыдущем комментарии, почему бы просто не установить его в первоначальном объявлении?

Answer 3

Ты можешь использовать:

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