dynamic jquery radio buttons using.html() not rendering.

dynamic jquery radio buttons using.html() not rendering.

I am trying to make some dynamic jquery mobile radio buttons by rewriting a div's html. My app retrieves data every few days into a txt file that is stored on the phone. Is uses this text information to rewrite the number of radio buttons that are choices for props to use in the game.

The code written by the function below works fine when the output is pasted in manually and the page is restarted, but when I run the function from the click in the first radio button it renders as standard html with no styles. Is it possible to just replace html and have it render in jquery style?

  1. <div id=propchoices>    
  2. <fieldset data-role='controlgroup' id=field>
  3. <legend>Choose where to place the prop:</legend>
  4. <input type='radio' name='radio-choice' id='radio-choice-0' value='choice-0' checked='checked' />
  5. <label for='radio-choice-0' onClick=displayProps() >head</label>
  6. <input type='radio' name='radio-choice' id='radio-choice-1' value='choice-1' checked='checked' />
  7. <label for='radio-choice-1'>arm</label>
  8. <input type='radio' name='radio-choice' id='radio-choice-2' value='choice-2' checked='checked' />
  9. <label for='radio-choice-2'>foot</label>
  10. </fieldset>
  11. </div>

  13. <script>
  14. var propchoicesA=new Array("head","arm","foot");

  16. function displayProps(){

  18.     data="<fieldset data-role='controlgroup'>"
  19.     data+="<legend>Choose a pet:</legend>"

  21.     for(i=0;i<propchoicesA.length;i++){
  22.              data+="<input type='radio' name='radio-choice' id='radio-choice-"+i+"' value='choice-"+i+"' checked='checked' />";
  23.          data+="<label for='radio-choice-"+i+"'>"+propchoicesA[i]+"</label>";
  24.         
  25.         
  26.     }
  27.     data+="</fieldset>";
  28.     alert(data);
  29.     if($(document).ready){
  30.         alert("yo");

  32.     $("#propchoices").html(data);
  33.     }
  34. }

  36. </script>