How do you dynamically add side panel menu items with jQuery Mobile and keep all CSS styling?

问题

I pulled very small snippets from my code to show a very simple example of my problem. I put it in JSFiddle -> http://jsfiddle.net/hollycoffee/LjLMU/

I have researched and found others with the same issue and they either tried addClass or refresh jQuery methods, so I tried both in a few different places in my code and nothing worked, so I'm hoping that by making the simple example in JSFiddle, someone can point me to exactly what I am missing and where.

The example is random and won't make sense, but the part that I am stuck on is the fact that only the dynamic portion of the menu loses style, the Skills list.

The menu portion markup looks like this:

<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>

<!-- 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">
                <li><a href="#" data-rel="close">Angry Birds</a></li>
                <li><a href="#" data-rel="close">Professional Events</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->
</div><!-- / Menu panel -->

Everything looks good except for the skillsDiv, which is filled by this javascript:

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);     
}

Each skill does show as a list item, but has no CSS.

Here is the JSFiddle so you can use the top left Menu button to see the skills list with no style:

http://jsfiddle.net/hollycoffee/LjLMU/

Thank you so much for the help, you StackOverflow geniuses help me every time! -Holly

(Quick note update - In my real application, I don't use the $(document).ready() - I just put it into this example to fill my array for me. My real application gets the array filled by an external API, so I thought this was the simplest way to re-create it.)

回答1:

Edit: Add this at the end of your function

$('[data-role=page]').trigger('pagecreate');

~~Just add $('[data-role=panel]').trigger('updatelayout'); after injecting items dynamically to panel.~~

Demo

回答2:

Use:

$('#panel-id').html(yourHtmlHere);
$('#panel-id').trigger('create');
$('#panel-id').trigger('updatelayout');

Standard CSS for styling.

来源：https://stackoverflow.com/questions/16429665/how-do-you-dynamically-add-side-panel-menu-items-with-jquery-mobile-and-keep-all

标签

javascript

jquery

html

css

jquery-mobile