jquery-mobile create dynamic controlgroup and apply jquery-ui css

Question

This is my code: http://jsfiddle.net/YKvR3/34/

I would create a controlgroup with values that are in my array (name). The problem is that when I click load button the values are added in a controlgroup but the jquery-ui styles are not loaded like in the image. The controlgroup is not styled with jquery-ui mobile css.

$("#load").click(function(){
var name=["one","two"];
var html='<fieldset id="listPlayers" data-role="controlgroup"><legend><h1>Choose as many players as youd like to remove:</h1></legend>';
for ( var int = 0; int < 2; int++) {
        html+='<input type="checkbox" name="checkbox-'+int+'a" id="checkbox-'+int+'a" class="custom" /><label for="checkbox-'+int+'a">'+name[int]+'</label>';
    }
    alert('<legend><h3>Choose as many players as you would like to remove:</h3></legend>'+html+'</fieldset');
    $("#list").html(html+'</fieldset');       
//$("#list").page();});​

What I am doing wrong? Thanks.

Answer 1

$("#list").trigger('create');

From: jqm docs

if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).