title: jQuery mobile: Applying style after reloading content
body: <p>First of all I' very new to jQuery and JavaScript but not to HTML and PHP.</p>
  
  <p>I found many posts about that problem but no solution. I think I am doing something (completely?) wrong...</p>
  
  <p>I've got two files, the index.php and content.php which should dynamically add content to the page.</p>
  
  <p>index.php:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;meta charset="UTF-8"&gt;&lt;/meta&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;link type="text/css" rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css"&gt;&lt;/link&gt;
      &lt;script type="text/javascript" src="../js/jquery-1.8.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Ajax test&lt;/title&gt;
  
      &lt;script language="JavaScript"&gt;
  
      $(function(){
          $('#page1').click(function(event) {        
              $('#content').load($(this).attr('href')).trigger("create");
              return false;
          });
      });
  
  
      $(function(){
          $('#page2').click(function(event) {        
              $('#content').load($(this).attr('href')).trigger("create");
              return false;
          });
      }); 
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="hm-agenda" data-theme="a" data-role="page"&gt;
  
          &lt;div data-theme="a" data-role="header"&gt;
              &lt;h1&gt;Ajax test&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div id="content" data-role="content"&gt;
              Default content
          &lt;/div&gt;
  
      &lt;div data-theme="a" data-role="footer" data-position="fixed" class="nav-glyphish-example"&gt;
          &lt;div data-role="navbar" class="nav-glyphish-example" data-grid="d" class="navdiv"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="content.php?page=1" id="page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="content.php?page=2" id="page2"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="content.php?page=3" id="page3"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="content.php?page=4" id="page4"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="content.php?page=5" id="page5"&gt;Page 5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So a click to "Page 1" or "Page 2" in the navigation should load content.php?page=x into the div with the id "content".</p>
  
  <p>And this is how content.php looks like:</p>
  
  <pre><code>&lt;ul data-role="listview" class="hm-list"&gt;
  &lt;li data-role="list-divider"&gt;&lt;h3&gt;You are on page: &lt;?php print $_GET['page']; ?&gt;&lt;/h3&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Loading the file into the content-div works fine put jQuery won't apply the styling stuff.
  The strange thing is that after clicking the link in the navigation the style is getting applied for about one second and disappears immediately.</p>
  
  <p>This example is online at: <a href="http://m.sepulturagenda.ch/ajax/" rel="nofollow">http://m.sepulturagenda.ch/ajax/</a></p>
  
  <p>Any help is appreciated. I stock here for hours now...</p>