javascript - jQuery Mobile: alternative of .trigger('create') or .page() when updating navbar? - Stack Overflow

admin管理员组

文章数量:1429494

I have the following jQuery Mobile HTML code, the navbar's content is set using javascript. jQuery mobile styles the navbar when it's set statically, but when you set the content of it (html) later using javascript, you have to do some extra work to make it work:

    <div data-role="header">
        <h1 id="title">App</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">    
        <p>Loading...</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" id="navbar">
            <ul id="menu">
            </ul>
        </div>
    </div><!-- /footer -->
</div><!-- /page -->

trigger('create'); is generally used to solve the problem of unstyled markup when set using javascript/ajax. However, it seems only to work within data-role="content" and not for #navbar. The script below should work but leaves the menu unstyled...

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>").trigger('create');
});

Any ideas how to solve this? I have tried page(); and .listview('refresh'); with no results.

I have the following jQuery Mobile HTML code, the navbar's content is set using javascript. jQuery mobile styles the navbar when it's set statically, but when you set the content of it (html) later using javascript, you have to do some extra work to make it work:

    <div data-role="header">
        <h1 id="title">App</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">    
        <p>Loading...</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" id="navbar">
            <ul id="menu">
            </ul>
        </div>
    </div><!-- /footer -->
</div><!-- /page -->

trigger('create'); is generally used to solve the problem of unstyled markup when set using javascript/ajax. However, it seems only to work within data-role="content" and not for #navbar. The script below should work but leaves the menu unstyled...

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>").trigger('create');
});

Any ideas how to solve this? I have tried page(); and .listview('refresh'); with no results.

• javascript
• jquery
• html
• dom
• jquery-mobile

Share Improve this question Follow asked Feb 9, 2012 at 16:11 sougondesougonde 3,61833 gold badges2727 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Try calling the navbar method after appending the list item:

$(function(){
    $("#menu").html("<li><a href='#'>Test Styling</a></li>");
    $("#navbar").navbar(); 
});

Edit: You could also try creating the navbar dynamically :

var footer = $("#footer-id");

var navBar = $("div", {
    "data-role":"navbar",
    "html":"<ul><li><a href='#'>Test Styling</a></li></ul>"
}).appendTo(footer).navbar();   

本文标签： javascriptjQuery Mobile alternative of trigger(39create39) or page() when updating navbarStack Overflow