Контрольная группа теряет контроль после динамического добавления переключателя - jQuery Mobile

Question

Моя контрольная группа (jquery mobile 1.4) прекрасно воспроизводится при первоначальном динамическом создании группы радио, но когда я добавляю в нее другое радио, кнопки стилизуются, но разделяются. Когда я перезагружаю приложение, они снова вместе.

function showPlaces() {    
    $('#radio-group').empty();

    for(var i = 0; i < connections.length; i++) {
        $('#radio-group').append('<label><input type="radio" name="places" id="' + i + '" />' + place + '</label>');           
    }

    $('input[type=radio]').checkboxradio().trigger('create');
    $('#radio-group').controlgroup().trigger('create');
}

// Функция вызывается при запуске приложения и снова после добавления другого места

Некоторые другие вещи, которые я пробовал:

$("#radio-group").controlgroup("refresh");                                          
$('#radio-group').controlgroup('refresh');
$("[data-role=controlgroup]").controlgroup("refresh");
$('input[type=radio]').checkboxradio('refresh');

Также пробовал.controlgroup('container'), перед.append, но get "не может вызывать методы в controlgroup до инициализации".

Вот HTML:

<form>  
    <fieldset data-role="controlgroup" id="radio-group">
        <!-- Dynamically injected radio buttons go here -->
    </fieldset>
</form> 

Answer 1

Вам следует .append() предметы в .controlgroup("container") внутри для цикла, а затем увеличить радиокнопки .checkboxradio(),

for(var i = 0; i < connections.length; i++) {
  $('#radio-group')
      .controlgroup("container")
      .append('<label><input type="radio" name="places" id="+i+" />Place</label>');           
}

$("#radio-group")
    .enhanceWithin()
    .controlgroup("refresh");

Вам даже не нужно использовать .checkboxradio()вместо .enhanceWithin() на родительском контейнере.

демонстрация