title: How to load content of other html to div without losing css style?
body: <p>I tried to load other html content to my div but I found that I lose the style of the loaded content.</p>
  
  <p>I tried using some of below code:</p>
  
  <p><strong>.load()</strong>:</p>
  
  <pre><code>$('#paymentsExecutiveExSum').load("summary/ExecutiveSummary/paymentsExecutiveSummary.html");
  </code></pre>
  
  <p><strong>.get() &amp; .append()</strong>;</p>
  
  <pre><code>$.get("summary/ExecutiveSummary/paymentsExecutiveSummary.html",function(data){
      $("#paymentsExecutiveExSum").append(data);
  });
  </code></pre>
  
  <p>I use the same code:</p>
  
  <pre><code>&lt;a data-role="button" class="fullWidth"&gt;Test&lt;/a&gt;
  </code></pre>
  
  <p>My css from <strong>Inspect Element</strong>:</p>
  
  <p><strong>Loaded</strong> (from other html using normal way to load html)</p>
  
  <p><img src="https://i.stack.imgur.com/66hqi.png" alt="Loaded"></p>
  
  <p><strong>Not loaded</strong> (my case, basically it doesn't load the JQM button's css)</p>
  
  <p><img src="https://i.stack.imgur.com/4jedK.png" alt="Not loaded"></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Here is my full code:</p>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /&gt;
      &lt;link rel="shortcut icon" href="images/favicon.png" /&gt;
      &lt;link rel="apple-touch-icon" href="images/apple-touch-icon.png" /&gt;
      &lt;link rel="stylesheet" href="css/my.css"/&gt;
      &lt;link rel="stylesheet" href="css/theme-addon.css"/&gt;
      &lt;link rel="stylesheet" href="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.css"/&gt;
  
      &lt;script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script&gt;
          var jq = jQuery.noConflict();
          var animation = "none";
  
          Number.prototype.formatMoney = function(c, d, t){
              var n = this, 
                  c = isNaN(c = Math.abs(c)) ? 2 : c, 
                  d = d == undefined ? "." : d, 
                  t = t == undefined ? "," : t, 
                  s = n &lt; 0 ? "-" : "", 
                  i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
                  j = (j = i.length) &gt; 3 ? j % 3 : 0;
              return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
          };
      &lt;/script&gt;
      &lt;script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="WL.Client.init({})" id="content" style='display: none' class="fullWidth"&gt;
  
      &lt;div data-role="page" id="homePage"&gt;
          &lt;div data-role="content"&gt;
              &lt;a href="#" data-role="button" id="login" class="fullWidth"&gt;Log In&lt;/a&gt;
          &lt;script src="js/my.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;/div&gt;
  
      &lt;script src="js/plugin/simplesplitview-1.0.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="js/initOptions.js"&gt;&lt;/script&gt;
      &lt;script src="js/messages.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>my.js</strong></p>
  
  <pre><code>$('#login').click(function(e){
      e.preventDefault();
      e.stopImmediatePropagation();
  
      jq.mobile.changePage("next.html", { transition: animation, changeHash: true });
  });
  </code></pre>
  
  <p>Then, when it comes to <strong>summary.html</strong>:</p>
  
  <pre><code>&lt;div data-role="header" data-position="fixed" data-tap-toggle="false"&gt;
      &lt;button class="back" data-theme="a"&gt;Back&lt;/button&gt;
      &lt;div class="ui-title headerTitle"&gt;Summary&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-role="content" id='splitviewcontainer' class='splitviewcontainer summary'&gt;
  
      &lt;div class='leftside'&gt;
          &lt;div id="executiveSummaryMenuGroupButton"&gt;
              &lt;a id="paymentsExecutiveSummaryButton" data-role="button" class="executiveSummaryTitleMenuButton"&gt;Payments&lt;/a&gt;
              &lt;div class="horizontalDivider"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class='rightside' id='paymentsExSum'&gt;&lt;/div&gt;    
  &lt;/div&gt;
  
  &lt;script src="js/summary.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>summary.js</strong></p>
  
  <pre><code>$(function(){
      $('#executiveSummaryMenuGroupButton').hide();
      $('#splitviewcontainer').simplesplitview();
  });
  
  $('#paymentsExecutiveSummaryButton').click(function(e){
      $("#paymentsExSum").load("summary/ExecutiveSummary/paymentsExecutiveSummary.html").trigger('create'); //It seems it doesn't work
      $('#splitviewcontainer').simplesplitview('showRight', 'paymentsExSum', true);
  });
  </code></pre>
  
  <p>What is the proper way to load other html's content to div without losing css style?</p>