TryingToLearnAddClass

To get help with how to make sure the CSS isn't lost on the dynamically built menu section.

by hollycoffee

HTML

<section id="mainPage" data-role="page" class="type-home">
         
     <header data-role="header" data-position="absolute" data-theme="a">
         <h1>View Skills</h1>
             <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
         </header>
     
    <div data-role="content">
      <nav>    
        Skills collapsible set in left menu loses CSS styling...
      </nav>
     </div>
        
     <footer data-role="footer" data-position="absolute" data-theme="a" >
        </footer>
     
     
        <!-- Starting our left side menu panel -->
        <div data-role="panel" id="left-panel" data-theme="a">
        <ul data-role="listview" data-theme="a">
            <li data-icon="back"><a href="#" data-rel="close">Back Home</a></li>
        </ul><br />
            
        <div class="ui-header ui-bar-a" data-theme="a">Settings</div>
        <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
          <h3>Optimization Settings</h3>
          <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
              <ul data-role="listview">
                <li><a href="#" data-rel="close">Colors</a></li>
                <li><a href="#" data-rel="close">Preferences</a></li>
              </ul>
          </div><!-- /collapsible-set -->
        </div><!-- /collapsible -->
            
        <div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
        <div id="skillsList"></div>
            
         <div class="ui-header ui-bar-a" data-theme="a">Saved</div>    
        <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
          <h3>Saved Searches</h3>
          <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
              <ul data-role="listview">
      ...

JavaScript

$(document).ready( function () {
  var skills = ['skating','drinking','mining','flying','healing'];
  CreateSkillsList(skills);
} );

            
function CreateSkillsList(skills){
    
var skillsDiv = $('#skillsList');

var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\" data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
html += "<ul data-role='listview'>";

var size = skills.length;
for (i=0; i<size; i++)
{
    html += "<li><a href=\"#\" data-rel=\"close\"><div id='Skill" + i + "'></div></a></li>";
}

html += "</ul></div></div>";
skillsDiv.html(html);
            
            
 size = skills.length;
 for (i = 0; i < size; i++) {
       var divString = "#Skill" + i;
       $(divString).append(skills[i]);
    }
            

}