html - jquery mobile - 动态添加单选按钮

Question

对于这个 jsfiddle - http://jsfiddle.net/Ja3Fx/1/ $('div').trigger('create') 不能按要求工作。

它确实样式单选按钮，但它不太正确......有什么想法吗？

<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");       
    });    
});