jQuery Mobile:更新导航栏时替代.trigger(' create')或.page()吗? [英] jQuery Mobile: alternative of .trigger('create') or .page() when updating navbar?

问题描述

我有以下jQuery Mobile HTML代码，导航栏的内容是使用javascript设置的.静态设置时，jQuery mobile设置导航栏的样式，但是稍后在使用javascript设置导航栏(html)的内容时，则必须做一些额外的工作才能使其正常工作:

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');通常用于解决使用javascript/ajax设置时未标记样式的问题. 但是，它似乎只能在data-role="content"内使用，而不能在#navbar上使用.下面的脚本应该可以工作，但是菜单没有样式设置...

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

任何想法如何解决这个问题?我试过page();和.listview('refresh');没有结果.

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

推荐答案

在附加列表项后尝试调用navbar方法:

Try calling the navbar method after appending the list item:

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

修改: 您也可以尝试动态创建导航栏:

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

这篇关于jQuery Mobile:更新导航栏时替代.trigger(' create')或.page()吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！