JQMobile Dynamic Radio Buttons

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<html>
<head><title>jQuery Mobile Test</title></head>
<body>
    <div id="page" data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile Radio Buttons</h1>
        </div>
        <div data-role="content">
            <div data-role="fieldcontain">
                <fieldset id="optionsgroup" data-role="controlgroup">
                <legend>Choose an Option:</legend>
                </fieldset>
            </div>            
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

JavaScript

$(document).bind('mobileinit', function() {
    //alert('mobileinit');
    $(document).bind('pageinit', function(e, data) {
        // initialize page
        //alert('init');
    });
    $(document).bind('pagebeforeshow', function(e, data) {
        // before show page
        var $container = $('#optionsgroup').find('.ui-controlgroup-controls');

        // build radio button list
        for (var i = 0; i < 3; i++) {
            var id = 'option_' + i,
                label = 'Option ' + i;

            $('<input />', {
                'id': id,
                'type': 'radio',
                'name': 'options',
                'value': i
            }).append('<label for="' + id + '">' + label + '</label>').appendTo($container);
        }
        // refresh control group
        $container.find('input[type=radio]').checkboxradio();
    });
});

// have to manually write script tag since jsFiddle loads external 
// scripts before our code and we need to bind to mobilinit before
// jquery.mobile is loaded
document.write('<scr' + 'ipt type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></sc' + 'ript>');