jQuery Mobile Tabs using data-role=navbar

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div data-role="page" id="myPage1">
    <ul data-role="listview" id="list">
       <li>
           <fieldset class="ui-grid-a">
               <div class="ui-block-a"><button data-mini="true" class="add">Add</button></div>
               <div class="ui-block-b"><button data-mini="true" class="delete">Delete</button></div>
           </fieldset>
        </li>
    </ul>
    <button id="addOneLi" data-theme="a" data-mini="true">Add One Li</button>

</div>

JavaScript

$('#addOneLi').click(function(){
    var html = '<li><fieldset class="ui-grid-a"><div class="ui-block-a"><button data-mini="true" class="add">Add</button></div><div class="ui-block-b"><button data-mini="true" class="delete">Delete</button></div></fieldset></li>';
    $('#list').append(html);
    $('#list').listview("refresh");
});