controlgroup – add items dynamically (jQuery Mobile 1.4)

.controlgroup( “container” )

In jQuery Mobile 1.3.2, it was possible to add elements dynamically to data-role="controlgroup" div directly without the need to insert them into .controlgroup( "container" ).

However, things has changed in jQuery Mobile 1.4. To get best results in terms of properly formatted _controlgroup, new items should be inserted into .controlgroup( "container" ).

The previous step ensures uniform re-styling of controlgroup all elements (children) within data-role="controlgroup" and that re-styling controlgroup.


We have inserted new items dynamically into data-role="controlgroup" and ready to proceed further. Let’s assume that new items are a mixture of buttons, checkboxes, radio buttons…etc, are we going to call widget enhancement method(s) for each type?

Most of you know the answer which is .trigger( "create" )! Well, it is true, but this function is deprecated as of jQuery Mobile 1.4 and will be removed on jQuery Mobile 1.5. It is now replaced with .enhanceWithin() which will be often used in latest version and versions to come.

.controlgroup( “refresh” )

It is important to re-style inner elements before re-styling the containing element. Because if containing element is re-styled first and then inner elements get enhancement, the latter styles would override the former one.

Full code & Demo

$( ".selector" )
    .controlgroup( "container" )
    .append( element );

$( ".selector" )
    .controlgroup( "refresh" );


3 thoughts on “controlgroup – add items dynamically (jQuery Mobile 1.4)

Drop me a line or two ;)

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s