I have designed a function that dynamically creates and adds content to the body of an HTML page. However, I am facing an issue where the styles I desire are not being applied to the content. I am aware that dynamically added content may not inherit styles, so I tried using listview("refresh") in my listview but it didn't work. Now, as I am adding a div element, I have also attempted .page() and other solutions without success. I am seeking a resolution for this problem.
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);
}