title: how to call a function to auto load elements in jquery mobile site
body: <p>What I want to do is to have my navbar HTML markup in one place ( for easy editing).
  Right now my index.html body content looks like:</p>
  
  <pre><code>&lt;div data-role="page" id="SomePage"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;This is Page 1&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="navbar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and am calling the my files in the header as such:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>in my app.js file is where I am trying to load the nav bar.  I have tried it 2 ways</p>
  
  <p>The first:</p>
  
  <pre><code>var NavBar = function() {
  $('div[data-role="navbar"]').html('&lt;ul&gt;' +
      '&lt;li&gt;&lt;a href="#SomePage" data-transition="fade" data-icon="none"&gt;By Brand&lt;/a&gt;&lt;/li&gt;' +
      '&lt;li&gt;&lt;a href="#AnotherPage" data-transition="fade" data-icon="none"&gt;By Flavor&lt;/a&gt;&lt;/li&gt;' +
      '&lt;li&gt;&lt;a href="#LastPage" data-transition="fade" data-icon="none"&gt;Zero Nicotine&lt;/a&gt;&lt;/li&gt;' +
      '&lt;/ul&gt;');
  }
  
  $(document).ready(function() {
      NavBar();
  }); 
  </code></pre>
  
  <p>This results in the page getting the app to show my links, but they are stack like a normal ul without the list-style</p>
  
  <p>The second way I tried it was:</p>
  
  <pre><code>var NavBar = function() {
  $('div:jqmData[role="navbar"]').html('&lt;ul&gt;' +
      '&lt;li&gt;&lt;a href="#SomePage" data-transition="fade" data-icon="none"&gt;By Brand&lt;/a&gt;&lt;/li&gt;' +
      '&lt;li&gt;&lt;a href="#AnotherPage" data-transition="fade" data-icon="none"&gt;By Flavor&lt;/a&gt;&lt;/li&gt;' +
      '&lt;li&gt;&lt;a href="#LastPage" data-transition="fade" data-icon="none"&gt;Zero Nicotine&lt;/a&gt;&lt;/li&gt;' +
      '&lt;/ul&gt;');
  }
  
  $(document).ready(function() {
      NavBar();
  });
  </code></pre>
  
  <p>This results in not seeing the links at all.</p>
  
  <p>How do I create a function to load the 'navbar' in one place and use the jQuery Mobile styling?</p>