Radion buttons won't style properly on second load

Radion buttons won't style properly on second load

Hi,

I'm having a very weird problem with radio buttons in JQuery Mobile. I'm populating some radiobuttons with ajax. When I do it the first time it's ok, but any subsequent loads seem to cause problems with the display - each checkbox is displayed separately rather than on a single list.

It knows that the buttons are in one group, because selecting one causes the other to deselect. But the styling suggests each is separate. 



  1. function getWords() {

     var gig_id = $('#gigs').val(); 

     $.ajax({
     url: Nnn.serverLocation+'/words?gigid='+ gig_id,
     success: function(data) { 
     Nnn.words = eval('(' + data + ')'); 
     displayWords();
     }
     });
    }

    function displayWords() {
     $('#word_container').html('<fieldset data-role="controlgroup" id="words"></fieldset>');

     $('#words').html("<legend>It's:</legend>");
     $.each(Nnn.words, function(key, value) { 
     $('#words').append('<label for="'+value.Word+'" >'+value.Word+'</label><input type="radio" value="'+value.Word+'" id="'+value.Word+'" name="radio-choice-1" />'); 
     });

     $('#words input').checkboxradio();

     $('body').page();
    }
























The HTML looks like 

  1. <div id='all' data-role="page">

     <div data-role="content">


     <div data-role="fieldcontain" id='word_container'>


     <fieldset data-role="controlgroup" id='words'>


     </fieldset>
     </div> 
     </div>
    </div>














It's driving me crazy!

Jimmy.