title: Incorporating External Html into a jQuery Mobile page
body: <p>I am attempting to dynamically incorporate an external source of html into a jQuery mobile page. I am able to successfully incorporate the external html but it looks like regular HTML (i.e. not jQuery mobile affected Html). Can any one suggest what I might be doing wrong?</p>
  
  <p>Main Html:</p>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
      /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://jqueryui.com/ui/jquery-1.7.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function () {
              $("#main").load('externalHtml.html');
              //$("#main").append('externalHtml.html');
              //$("#main").load('externalHtml.html #contain');
              //$("#main").page();
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div data-role="content"&gt;
          &lt;div id="main"&gt;&lt;/div&gt;Main Page&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>externalHtml.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
       &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
                  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/&gt;
          &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://jqueryui.com/ui/jquery-1.7.1.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
  &lt;body&gt;
  external html
  &lt;div data-role="content" id="contain"&gt;
  &lt;input  type="search" name="name" id="name" value="" /&gt;
   &lt;/div&gt;
        &lt;/body&gt;
        &lt;/html&gt;
  </code></pre>