1

I've created a function which dynamically generates and adds it into the body of the HTML. However, it doesn't seem to update the with my desired styles. I understand that dynamically added content might not inherit the styles, and hence in my listview I called listview("refresh). This time I'm adding a div. I tried adding .page() and the other solutions but they are all not working for me. Am looking for a solution.

function pageGenerator() {
  var strings = "<div data-role='page' id = 'page" + currentId + "' align = 'center' style='background-color: #3e99ff;'><div data-role='main' id = 'content" + currentId + "' class='ui-content'><h1 style='color:#ffffff; text-align:center; font-size: 34px; font-family: 'Quicksand', sans-serif !important;'>" + ArrayIndex[currentId] + "</h1></div><div data-role='footer' data-id='foo1' data-position='fixed'><div data-role='navbar'><ul><li><a href='#welcomescreen'>Home</a></li><li><a href='#about'>About</a></li></ul></div></div></div>";
  $("#page_body").append(strings);
// Move to this page by ID '#page'
  $.mobile.changePage("#page" + currentId);
  console.log(1);
  console.log(2);

}
hackerman90219
  • 81
  • 1
  • 1
  • 13

1 Answers1

0

$.mobile.initializePage(); is missing between:

$("#page_body").append(strings); and $.mobile.changePage("#page" + currentId);

Please check the following stackOverflow answer. You will find the same problem and the solution for it ;)

Community
  • 1
  • 1
Hristo Eftimov
  • 13,845
  • 13
  • 50
  • 77