jquery-mobile - Jquery Mobile の Checkboxradio ウィジェットを動的に作成するとレンダリングできない

Question

HTML コード。

<div data-role="panel" data-theme="b" id="locationPanel" data-position="right" data-dismissible="true" data-display="overlay">
</div>

JS コード

$("#trackSearch").click(function () {
    if (!loginFlag) {
        $("#toggleLogin").click();
        return false;
    }

    $.ajax({
        url: '/vehicleAlarm/vehicle/nodeByUser',
        type: 'get',
        cache: false,
        dataType: 'json',
        success: function (data) {
            if (data.company) {

            $("#locationPanel").empty();

            var rootStr ="<div data-role='collapsible' id='testcol'  data-collapsed='true'><h3>test</h3><div data-role='fieldcontain'>  <fieldset data-role='controlgroup'><input type='checkbox' name='checkbox-1a' id='checkbox-1a'   class='custom' /><label for='checkbox-1a'>  Cheetos</label><input type='checkbox' name='checkbox-2a' id='checkbox-2a'   class='custom' /><label for='checkbox-2a'>  Doritos</label><input type='checkbox' name='checkbox-3a' id='checkbox-3a'   class='custom' /><label for='checkbox-3a'>  Fritos</label><input type='checkbox' name='checkbox-4a' id='checkbox-4a'    class='custom' /><label for='checkbox-4a'>  Sun Chips</label>   </fieldset></div></div>"

            $("#locationPanel").append(rootStr);

            $("#testcol").collapsible();

            $("input[type=checkbox]").checkboxradio().checkboxradio('refresh');

            $("#locationPanel").panel("open");

            $("#testcol" ).on( "collapsibleexpand", function( event, ui ) {
                console.log("testexpand2");
            });
            }
        }
    });
});

ボタンをクリックすると、パネルが表示され、checkboxradio ウィジェットに、jqm でレンダリングできない元の html スタイルが表示されます。誰でも私を助けることができますか?..ありがとう