jquery mobile - dynamically add radio button - html

Question

for this jsfiddle - http://jsfiddle.net/Ja3Fx/1/ $('div').trigger('create') doesn't
work as required.
it does style radio button but it isn't quite right ... any ideas ?
<div id="testPage" data-role="page">
<div data-role="content">
<fieldset data-role="controlgroup">
<legend>Radio buttons, vertical controlgroup:</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>
<a id="add-animal" href="#" data-role="button" data-position-to="window">Add Animal</a>
</div>
</div>
$('#add-animal').click(function() {
var fldset = $('fieldset');
$(fldset).append($('<input type="radio" name="radio-choice-1" id="radio-choice-5" value="choice-5"><label for="radio-choice-5">Bat</label>'));
$("input").checkboxradio();
$('div ').trigger('create ');
});

Answer 1

I am using the following code to make a panel. You can try similar code.
$(document).on('pagecreate', '[data-role="page"]', function(){
$('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});
});