Is there a way to reapply jQueryMobile's css to a button that is inserted programmatically inside a ListView? When I hard-code the button, the styling applies correctly, but when adding it dynamically, the style is lost.
For reference, this is the code used to insert an item into the ListView:
//CODE TO ADD A JAVASCRIPT BUTTON TO THE LIST
var parent = document.getElementById("group-1");
var listItem;
listItem = document.createElement('li');
listItem.setAttribute('id',"group-1-row-0");
var inner= "<a href=\"#\" style=\"padding-top:0px;padding-left:0px;padding-bottom:0px\">";
inner = inner + "<div class=\"customTableLayout\">";
inner = inner + "<fieldset data-role=\"fieldcontain\" id=\"ui-softbutton\">";
inner = inner + "<input type=\"button\" id=\"ui-softbutton\" value=\"SOFTCODED\" />";
inner = inner + "</fieldset>";
inner = inner + "</div>";
inner = inner + "</a>";
listItem.innerHTML = inner;
parent.appendChild(listItem);
//WHEN YOU TRY TO ENABLE THIS CODE, THE DISPLAY BECOMES WEIRD
//$("#ui-softbutton").button();
//$("#ui-softbutton").button('refresh');
$(parent).listview("refresh");
To VIEW the result of this code and see the HARDCODED button in action, please visit this JFiddle link.