将按钮添加到导航栏并以编程方式显示

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');   
}); 
​