Layout resetting after 'back' button, hhen JS populates a list element

Layout resetting after 'back' button, hhen JS populates a list element

Hi there. Ive got a UL with ID ='listaTurmas'. All i want to do is, everytime this function is called, the list contents is refreshed according to the  Sessao.turmas array.

The first time it shows up, it works fine. The second time, layout is completely lost.
Would apreciate any help !

THis is my Div:

  2. <div data-role="page" id="turmas" data-theme="b">
  4. <div data-role="header">
  5. <h1>List</h1><a onClick="history.back(-1);" data-role="Button">Back</a>
  6. </div>
  8. <div data-role="content">
  9. <ul data-role="listview" id="listaTurmas" data-inset="true">
  10. <!-- javascript will fill this -->
  11. </ul>
  12. </div>

  14. <div data-role="footer">
  15. <h4>FOOTER</h4>
  16. </div>
  17. </div>

And this my code:
  2. function geraListaDeTurmas() {
  3. var countTurma = Sessao.turmas.length;
  4. $("#listaTurmas").empty();
  5. while(countTurma--) {
  6. var estaTurma = Sessao.turmas[countTurma];
  7. var estesAlunos = estaTurma.alunos;
  8. var countAluno = estesAlunos.length;
  9. var htmlMarcacao = "";
  10. $("#listaTurmas").append("<li class='listaTurma' class='listaTurma'><a onClick='selecionarTurma("+estaTurma.codigo+")'>  "+estaTurma.disciplina+" - Turma "+estaTurma.codigo+" - Serie - "+estaTurma.serie +" - Semestre "+ estaTurma.semestre+"</a></li>");

  12. }
  13. };