將按鈕添加到導航欄並以編程方式顯示

Question

這是我的頁面代碼，我需要添加到「page1_nav」菜單項我有這個目前爲止，但無論是不工作或不顯示。

<div data-role="page" id="page1" > 
<div id="main" data-role="header" id="page1_header"> 
    <h1></h1> 
    <div data-role="navbar" id='page1_nav'> 
    </div> 
</div> 
<div data-role="content"> 
</div> 
</div> 

$('#page1').live('pageshow',function(event, ui){ 
var navbar =''; 
navbar+='<ul><li><a href="#" onclick="goBack()" data-back="true" class="ui-btn-inactive ui-state-persist">Menu1</a></li>'; 
navbar+='<li><a href="#" class="ui-btn-active ui-state-persist">Menu2</a></li></ul>'; 
$('#page1_nav').append($(navbar)); 
$('#page1_nav').page(); 
}); 

任何建議，提前

Answer 1

感謝你有你的jQuery包裹腳本標記？如果腳本不包含腳本標記，它將不會運行。

<script type="text/javascript"> 

//Your code here 


</script> 

Answer 2

你有一些HTML錯誤（雙人間id屬性），還我會使用pagebeforeshow，然後提升JQM標記

工作的呢？

• http://jsfiddle.net/Mg7rc/

HTML

<div data-role="page" id="home" data-add-back-btn="true"> 
    <div id="main" data-role="header" data-position="inline"> 
     <h1>Home</h1> 
     <a href="#" data-icon="check">Save</a> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">List View Navigation</li> 
      <li><a href="#page1">Go to Page1</a></li> 
     </ul>   
    </div> 
</div> 

<div data-role="page" id="page1" data-add-back-btn="true"> 
    <div id="myCustomNavbar" data-role="header" data-position="inline" data-add-back-btn="true"> 
     <!-- dynamic navbar --> 
    </div> 
    <div data-role="content"> 
     <p> 
      Hello Page 1 
     </p>    
    </div> 
</div> 

<div data-role="page" id="page2" data-add-back-btn="true"> 
    <div data-role="header" data-position="inline"> 
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li data-role="list-divider">List View Navigation</li> 
      <li><a href="#home">Go to Home Page</a></li> 
     </ul>   
    </div> 
</div> 

JS

$('#page1').live('pagebeforeshow', function(event, ui) { 
    var myNav = $('#myCustomNavbar'); 
    var navbar = '<div data-role="navbar">' 
     + '<ul>' 
     + '<li><a href="#" data-rel="back" data-direction="reverse">Back</a></li>' 
     + '<li><a href="#page2">Page 2</a></li>' 
     + '</ul>' 
     + '</div>'; 

    myNav.html(navbar).trigger('create');   
}); 
​