jQuery Mobile：更新navbar时可以使用.trigger（'create'）或.page（）替代？ [英] jQuery Mobile: alternative of .trigger('create') or .page() when updating navbar?

问题描述

我有以下jQuery Mobile HTML代码，导航栏的内容是使用javascript设置的。当jQuery移动样式设置静态时，导航栏，但是当您使用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：更新navbar时可以使用.trigger（'create'）或.page（）替代？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！