jQuery的編程方式添加導航欄元素移動

Question

我可以創建一個jQuery Mobile的頁面下面的代碼片段2項導航欄：

<div id="nav-bar" data-role="navbar"> 
    <ul id="nav-list"> 
     <li><a id="link1" href="#">Nav 1</a></li> 
     <li><a id="link2" href="#">Nav 2</a></li> 
    </ul> 
</div> 

我試圖以編程方式添加使用各種第三導航欄元素下面的代碼版本：

$("#nav-list").append("<li><a id='newElement' href='link3'>Nav 3</a></li>"); 
$("#nav-bar").navbar(); 
//$("#pageName").page(); 
//$("#pageName").trigger("create"); 
//$("#nav-list").listview("refresh"); 

當我執行此我看到「導航3」的鏈接出現，但它並不需要對其他環節的jQuery Mobile的格式。

任何幫助將不勝感激。

Answer 1

因爲這個問題，我已經失去了理智。 .navbar（）用於以前的版本，出於某種原因不再。

我已經做了一個功能，其工作是添加一個新的元素，然後重建導航欄。其中一部分來自其他人，所以我無法對此代碼負責（用於風格剝離的方法）。

這裏的工作示例：http://jsfiddle.net/Gajotres/V6nHp/

而這裏的使用方法：

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

Answer 2

在JQM增強開始之前，您應該在pagebeforecreate處理程序中附加您的HTML處理程序。