Control group loses control after dynamic add of radio button - jQuery Mobile

jquery-mobile

Solution

You should `.append()` items into `.controlgroup("container")` inside for loop, and then enhance radio buttons `.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");

You dont even need to use `.checkboxradio()`, instead use `.enhanceWithin()` on parent container.

Demo

Problem

My control group (jquery mobile 1.4) renders perfectly when dynamically creating the radio group initially, but when I add another radio to it, the buttons are styled, but separated. When I reload the app, they are together again. ``` 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'); } ``` // The function is called when app starts, and again after I add another place Some other things I've tried: ``` $("#radio-group").controlgroup("refresh"); $('#radio-group').controlgroup('refresh'); $("[data-role=controlgroup]").controlgroup("refresh"); $('input[type=radio]').checkboxradio('refresh'); ``` Also tried .controlgroup('container'), before the .append, but get "cannot call methods on controlgroup prior to initialization". Here's the html: ``` <form> <fieldset data-role="controlgroup" id="radio-group"> <!-- Dynamically injected radio buttons go here --> </fieldset> </form> ```

Original source