title: jquery mobile, add collapsible content inside of a listview li dynamically
body: <p>I have an empty list view:</p>
  
  <pre><code>&lt;ul data-role="listview" data-theme="d" id="test"&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'd like to add li tags which contain collapsible content dynamically, but I don't know how to "refresh" it so that the collapsible content shows up?</p>
  
  <p>I tried:</p>
  
  <pre><code>$(document).on('pageinit', function() {
  $('#test').append('&lt;li&gt;&lt;a href="#"&gt;&lt;div data-role="collapsible" class="member-item" data-theme="a"&gt;&lt;h3&gt;title&lt;/h3&gt;&lt;p&gt;some content&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;a href="#"&gt;test&lt;/a&gt;&lt;/li&gt;');
  $('#test').listview("refresh");
  });
  </code></pre>
  
  <p>But this only refreshes the li part.</p>
  
  <p>Then I tried:</p>
  
  <pre><code>$(document).on('pageinit', function() {
  $('#test').append('&lt;li&gt;&lt;a href="#"&gt;&lt;div data-role="collapsible" class="member-item" data-theme="a"&gt;&lt;h3&gt;title&lt;/h3&gt;&lt;p&gt;some content&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;a href="#"&gt;test&lt;/a&gt;&lt;/li&gt;');
  $('#test').listview("refresh");
  $('.member-item').collapsible('refresh');
  });
  </code></pre>
  
  <p>But then I just get the loading icon and the page does not load?</p>