title: Why didnt' jQuery mobile enhance elements in a div after i call enhanceWithin()?
body: <p>I am learning how to render mobile web page using jQuery mobile, coding on jsfiddle.
  When I follow the way shown in <a href="http://api.jquerymobile.com/enhanceWithin/" rel="nofollow">jQuery mobile document</a> to enhance appended elements after web page loaded, the result seems like that enhanceWithin method of jQuery mobile didn't work properly.</p>
  
  <p>I am wondering what's wrong with my code? Or this was caused by jsFiddle?
  Maybe it couldn't emulate in some situation?</p>
  
  <p>This is my html code:</p>
  
  <pre><code>&lt;div data-role="page"&gt;
  &lt;div data-role="header" data-position='fixed'&gt;
      &lt;a href="#" id="back" data-role="back" data-rel="back"&gt;Back&lt;/a&gt;
      &lt;div id="head"&gt;Title&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content" data-role="content"&gt;
      &lt;ul id="items" data-role="listview" data-inset="true"&gt;
          &lt;li&gt;&lt;a href='#'&gt;Sony TV&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;Samsung Note 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#'&gt;ASUS zenfone&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="insert"&gt;
      &lt;/div&gt;
  &lt;div&gt;
      &lt;div data-role="footer" data-position='fixed'&gt;
          &lt;div id="foot"&gt;copy right.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Styles</p>
  
  <pre><code>#head{
      font-size:35px;
      height:100%;
      line-height:100%;
      text-align:center;
  }
  #foot{
      font-size:30px;
      height:100%;
      line-height:100%;
      text-align:center;
  }
  </code></pre>
  
  <p>Scripts:</p>
  
  <pre><code>$("#items").append("&lt;li&gt;&lt;a href='#'&gt;Sony Z3&lt;/a&gt;&lt;/li&gt;")
  .append("&lt;li&gt;&lt;a href='#'&gt;Test&lt;/a&gt;&lt;/li&gt;").listview("refresh");
  
  var ctx =
  "&lt;ul id='newlistview' data-role='listview' data-inset='true'&gt;" +
      "&lt;li&gt;&lt;a href='#'&gt;Line 1&lt;/a&gt;&lt;/li&gt;" +
      "&lt;li&gt;&lt;a href='#'&gt;Line 2&lt;/a&gt;&lt;/li&gt;" +
  
  "&lt;/ul&gt;";
  
  $("#insert").append(ctx).enhanceWithin();
  /*
  $('#newlistview').listview({
     inset:true
  });
  */
  </code></pre>
  
  <p>Finally, the render result from <a href="http://jsfiddle.net/wwsq9odg/2/" rel="nofollow">jsFiddle</a></p>
  
  <p>The result I expect to show is as well as the result made by calling .listview({options}) in the block commented.</p>
  
  <p>But I just can't make it with enhanceWithin() method, which I intend to enhance huger code block with many widgets later.</p>