更改內部HTML後的樣式navbar列表項

我在標題欄中有一個導航欄，它已被正確初始化並且樣式正確。我遇到的問題是當我更改innerHtml並調用elem.navbar（）時，列表項無法獲得樣式。更改內部HTML後的樣式navbar列表項

這裏是一個要添加到導航欄HTML

var navbar = this.$(':jqmData(role="navbar")'); 
navbar.empty().append(this.templateNav(building.toJSON())); 
navbar.navbar();

代碼，下面是我使用

<ul> 
    <li><a href="#buildings/1/floors/1">1</a></li> 
</ul>

我關注的模板是如何使JQM重新計算網格佈局和重新添加新的html後風格的列表項？

之前

Navbar before appending to innerHTML

後

Navbar after appending to innerHTML

來源

2012-09-21 jachenry

如果你可以發佈jsfiddle，那真的很有幫助。也許使用刷新工作，請看看這裏：http://andymatthews.net/read/2011/12/14/Refreshing-jQuery-Mobile-listviews,-buttons,-select-dropdowns,-and-input-fields – Hessius

@Hessius這是一個[jsfiddle]（http://jsfiddle.net/zJJbP/）來顯示我遇到的問題。原來replaceWith不會返回新的jquery對象。繞過它的方式是在使用replaceWith後再次查詢，然後在新對象上調用navbar（）。 [jsfiddle]（http://jsfiddle.net/JKhBS/1/） – jachenry

從DOM中刪除導航欄元素。之後重新創建它並觸發器創建事件來處理新HTML標記中包含的所有插件的自動初始化。

下面的腳本已經成功地測試：

var navbarparent = $('#navbar').parent(); 
$('#navbar').remove(); 
navbarparent.html("<div data-role=\"navbar\"><ul><li><a class=\"nav-li\" href=\"a.html\">Two</a></li><li><a class=\"nav-li\" href=\"a.html\">Three</a></li></ul></div>").trigger('create');

下面你可以找到工作的例子：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Navbar Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
     <script type="text/javascript"> 
      $(document).on('click', '.nav-li', function(e){ 
       var navbarparent = $('#navbar').parent(); 
       $('#navbar').remove(); 
       navbarparent.html("<div data-role=\"navbar\"><ul><li><a class=\"nav-li\" href=\"a.html\">Two</a></li><li><a class=\"nav-li\" href=\"a.html\">Three</a></li></ul></div>").trigger('create'); 
       return false; 
      }); 
     </script> 
    </head> 

    <body> 
     <!-- /page --> 
     <div data-role="page"> 
      <!-- /header --> 
      <div data-role="header" data-theme="b"> 
       <h1>Dynamic Navbar</h1> 
      </div> 
      <!-- /content --> 
      <div data-role="content"> 
       <div id="navbar" data-role="navbar"> 
        <ul> 
         <li><a class="nav-li" href="test.html">One</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

前： enter image description here

後： enter image description here

我希望這有助於。

來源

2012-09-21 21:33:41

感謝您的幫助。這裏有一個[jsfiddle]（http://jsfiddle.net/JKhBS/1/），用來修改上面的代碼。 – jachenry

不知道有關templateNav或building任何東西，這似乎爲我工作：

樣機building JSON OB的JECT和templateNav：

buildingJson = [ 
    {"href":"foo.html", 
    "title":"One"}, 
    {"href":"bar.html", 
    "title":"Two"}   
] 

function templateNav(json){ 
    str = ""; 
    for(i = 0; i < json.length; i++){ 
    str += '<li><a href="'+json[i].href+'">'+json[i].title+'</a></li>'; 
    } 
    return str; 
}

更新navbar

var navbar = this.$(':jqmData(role="navbar") ul'); 
navbar.empty().append(templateNav(buildingJson));

HTML

<div data-role="navbar"> 
    <ul> 
    <li><a href="a.html">One</a></li> 
    </ul> 
</div><!-- /navbar -->

我不知道你的代碼看起來像;如果您ul由div與data-role=navbar包裹，然後你empty後，你需要確保templateNav包裹導致ul，或navbar更新選擇以包括ul。嘗試記錄templateNav，然後再附加它以查看實際添加的內容。

無論如何，即使在動態更改innerHTML之後，navbar.navbar()似乎也不是必需的。

來源

2012-09-21 20:53:33 Tuanderful

更改內部HTML後的樣式navbar列表項

回答

相關問題