Radio buttons "checked" attribute not working when adding markup dynamically jQuery Mobile 1.3.2 -

i not know if bug, if want generate list of radio buttons dynamically , have 1 selected default following not working changepage():

$(document).on("pagebeforeshow", "#radio", function(e) {  html = '<fieldset data-role="controlgroup"><legend>choose pet:</legend><input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /><label for="radio-choice-1">cat</label><input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /><label for="radio-choice-2">dog</label><input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /><label for="radio-choice-3">hamster</label><input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" /><label for="radio-choice-4">lizard</label></fieldset>';  $('span.label').append(html); $('div#input-radio').trigger("create");  }); 

the value of html variable copied docs (radio buttons docs)

here page markup:

<div id="radio" data-role="page" data-theme="a">          <div data-role="header" data-position="fixed" data-id="footer">             <a href="../index.html" data-icon="arrow-l" data-iconpos="notext" data-ajax="false"></a>             <h1 class="app-name"></h1>             <div class="ui-btn-right" data-role="controlgroup" data-type="horizontal">                 <a href="#" data-role="button" data-icon="bars" data-iconpos="notext"></a>             </div>              <div data-role="navbar" data-iconpos="top">                 <ul class="input-nav">                     <li><a class="prev" href="#" data-icon="arrow-l" >previous</a></li>                     <li><a class="next" href="#" data-icon="arrow-r" >next</a></li>                 </ul>             </div><!-- /navbar -->         </div><!-- /header -->          <div id="input-radio" data-role="content" data-theme="a">             <span class="label"></span>             <!-- list of radio buttons options generated dynamically -->             <!-- option 1 -->             <!-- option 2 -->             <!-- option 3 -->           </div><!-- /content -->         <div data-role="footer"  data-position="fixed" data-id="footer">             <h1>footer</h1>         </div>     </div><!-- /text --> 

i have multipage template go 1 page other

//go next page         $.mobile.changepage(next_page, {             transition : "slide",             reverse : false,             changehash : false,             allowsamepagetransition : true         }); 

all working fine, radio buttons rendered correctly "checked" option never selected...

am missing something? workaround?

edit: way got work adding code on pagebeforeshow:

$('div#input-radio input:radio').each(function(i) {      if($(this).attr('checked')){           $(this).next().trigger('vclick');     }  }); 

even though hope there better solution...

as said in edit, way got work adding code on pagebeforeshow:

$('div#input-radio input:radio').each(function(i) {      if($(this).attr('checked')){          $(this).next().trigger('vclick');     }  }); 

maybe find useful