CODEWITHSUNDEEP
javascriptjqueryhtmljquery-data
Ken Vernaillen
Ken Vernaillen

Reputation: 859

How to set data attribute with jQuery on element that is not in DOM yet?

How can I set the data-attribute with jQuery on an element that is not in the DOM yet?

Code: 

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

The data attributes don't appear when I append it to the document. The other attributes do appear.

Upvotes: 0

Views: 1492

Answers (3)

Scimonster
Scimonster

Reputation: 33399

jQuery's data() method doesn't set HTML5 data- attributes, it actually stores high-level data in the DOM element. You can store complex objects and functions using data() that you can't using attributes.

If you really must set an attribute, use attr('data-toggle','collapse') and the like. But as mentioned in an earlier comment, why not just set it in the initial declaration?

Upvotes: 4

adeneo
adeneo

Reputation: 318182

You can add data attributes when creating the element

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

using data() stores the data internally in jQuery, it does not create HTML attributes, so it works rather poorly with attributes for things like Bootstrap

Upvotes: 4

Minko Gechev
Minko Gechev

Reputation: 25682

You can use:

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

Upvotes: 0

Related Questions