从javascript动态填充到导航栏中

这是我的jquery移动页面标题部分，我想在此代码中将动态填充的数据从javascript填充到导航栏

<div data-role="page" data-theme="a" id="homePage"  >
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3 class="mblHeading">Client</h3>
        <a href="#assignedWI" data-icon="home" data-transition="slide" data-theme="a"></a> <a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#AboutDialog" class="ui-btn-right"> About </a>
        <div data-role="navbar" >
            <ul id="navid">
                <li><a href="a.html">One</a></li>
                <li><a href="b.html">Two</a></li>
            </ul>
        </div>
    </div>

---

不幸的是，你不能像那样填充导航栏。函数navbar（）和navbar（'refresh'）不会在这里帮助您，不会触发（'create'）或触发（'pagecreate'）。出于某种原因，当您动态添加额外的navbar项时，它将不会被设置为应有的样式，这是一个错误

有两种替代方法可以实现这一点

在pagecreate或pagebeforecreate页面venet期间动态填充导航栏。 基本上，在这两个事件期间，页面的样式并不是根据jQuery移动样式设置的。因此，此时添加的任何内容都将自动增强

下面是一个正在运行的JSFIDLE示例：

$（document）.on（'pagebeforecreate'，'#index'，function（）{
$（'[data role=“navbar”]'）.html（'
'+
“
”+
“
”+
“
”+
“
”）；
});

手动增强动态添加的导航栏项 另一个解决办法是自己做。正如您将在工作示例中看到的那样，它并不复杂：

$（'#index'）.live（'pagebeforeshow'，函数（e，数据）{
addNewNavBarElement（'navbar-test'，'el4'，'Page Four'）；
});
var navbarHandler={
addNewNavBarElement:函数（navBarID、newElementID、newElementText）{
var navbar=$（“#”+navBarID）；
var li=$（“
”）；
变量a=$（“）

另请看我关于增强jQuery移动页面标记的另一个答案：
您好，谢谢您回答这个问题。对于第一个解决方案，您是否说我必须填充html中的所有内容并将其显示为html。您能解释一下吗？谢谢uNo不，第一个解决方案只需要y您需要使用其他li元素填充导航栏。您唯一不需要做的就是刷新导航栏，因为jQuery Mobile将自动执行此操作（仅当此操作在pagecreate或pagebeforecreate事件期间完成时）。谢谢你，我删除了刷新行，我还应该做些什么才能让它正常工作。看看我的JSFIDLE示例，我帮不了你，因为我可以看到你的代码。我的答案将为你提供足够的信息来完成其余的工作。我已经看到你已经将html内容直接添加到id中。我们可以将onclick添加到同样的方式
function populateQueryList4(queryTableID)
{
    var listParent = jq(queryTableID);
    listEntry = document.createElement("LI");
    aNode = document.createElement("A");

    aNode.innerHTML=navigationList[k-1];

    listEntry.appendChild(aNode);

    aNode.onclick = function() {
        //displayArtifactContent(artifactAreaInfoMap[wiTitle]);
    };
    listParent.append(listEntry);
    jq("#navid").navbar('refresh');
}

$(document).on('pagebeforecreate', '#index', function(){       
    $('[data-role="navbar"]').html('<ul>' +
        '<li><a href="#SomePage" data-transition="fade" data-icon="none">By Brand</a></li>' +
        '<li><a href="#AnotherPage" data-transition="fade" data-icon="none">By Flavor</a></li>' +
        '<li><a href="#LastPage" data-transition="fade" data-icon="none">Zero Nicotine</a></li>' +
        '</ul>');
});

$('#index').live('pagebeforeshow',function(e,data){    
    navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});


var navbarHandler = {
    addNewNavBarElement:function(navBarID, newElementID, newElementText) {
        var navbar = $("#" + navBarID);

        var li = $("<li></li>");        
        var a  = $("<a></a>");
        a.attr("id", newElementID).text(newElementText);
        li.append(a);

        navbar = navbarHandler.clearNavBarStyle(navbar);

        navbar.navbar("destroy");
        li.appendTo($("#" + navBarID + " ul"));
        navbar.navbar();
    },
    clearNavBarStyle:function(navbar){
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });
        return navbar;   
    }
}