title: Jquery Mobile: How to style dynamically added list items when listview() function does not work?
body: <p>I am new with jQuery Mobile and with jQuery in general and have run into a problem. I have been populated a list using 2 AJAX calls (data from two sources). The second call is located within the first so that it always executed after it. The calls are identical apart from the source of data and are as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul data-role="listview" data-inset="true" data-theme="a" data-filter="true" id="allVideosList"&gt;  
      &lt;li&gt;&lt;a href="#"&gt;This item is styled properly&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var html = ""; 
  var id = 0; 
  var displayName = "name";
  $.ajax({
      type:'GET',
      url: xxxx
      data: xxxx
      dataType: 'jsonp',
      success: function processResult(data) {
        ....
        html += '&lt;li data-filtertext="' + resultData.name + ' ' + date + '"&gt;&lt;a href="index.html?id=' + id + '"&gt;' + displayName + '&lt;/a&gt;&lt;/li&gt;';
        $('#allVideosList').append(html);
  });
  </code></pre>
  
  <p>Variables are defined within the ajax call but omitted here. The list created lacks any style, each item appears as a link. The function:</p>
  
  <pre><code>$('#allVideosList').listview('refresh');
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$('#allVideosList').listview();
  </code></pre>
  
  <p>returns the error</p>
  
  <blockquote>
    <p><code>$(...).listview</code> is not a function</p>
  </blockquote>
  
  <p>in the console. The function:</p>
  
  <pre><code>$('#allVideosList').trigger('create');
  </code></pre>
  
  <p>does not change anything.</p>
  
  <p>If I print the variable html to the console, copy its contents, and add this to a list in a different page, style is applied properly. For example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-role="content" id="list"&gt;
      &lt;ul data-role="listview" data-inset="true" data-theme="a" data-filter="true" id="allVideosList"&gt;
  
      &lt;/ul&gt;
  
  JAVASCRIPT:
  
  var html = "";
  html = '&lt;li data-filtertext="insert text here"&gt;&lt;a href="index.html?id=146"&gt;Name&lt;/a&gt;&lt;/li&gt;&lt;li data-filtertext="insert text here 2"&gt;&lt;a href="index.html?id=147"&gt;Name 2&lt;/a&gt;&lt;/li&gt;'
  $("#allVideosList").append(html) 
  </code></pre>
  
  <p>works fine. How can I apply a style to the dynamically loaded list?</p>