title: dynamically populating a jquery mobile listview without breaking data-filter
body: <p>There have been a lot of posts making references to the </p>
  
  <pre><code>$('#ListViewID').listview("refresh") 
  </code></pre>
  
  <p>call that needs to happen after your dynamically modify the DOM of a  element that is defined as a listview. I'm having no problems getting the listview to look right. The problem is, I marked up my listview  element to use the data-filter features of jquery mobile. This works with a static listview, but doesn't filter the dynamically populated contents of my listview. I'm NOT concatenating a string for creating my listview - I'm cloning a prototype cell. Is this the problem?</p>
  
  <p>here's my code</p>
  
  <pre><code>// capture prototype
          var prototype = $("#" + currentPage).find(".prototype");
  </code></pre>
  
  <p>After identifying the prototype, I similarly lock onto the "Shell" which is the listview element:</p>
  
  <pre><code>        var shell = $("#" + currentPage).find(".Rolodex");
          // declare variable for focus cell
          var thisrow;
  
  ....
  
                  // map fields
                  var pTitle;
                  var pSubtitle1;
                  var pSubtitle2;
                  var pJumper;
                  var cellLock;
  </code></pre>
  
  <p>Here, I duplicate the prototype cell as many times as I need for the data coming in </p>
  
  <pre><code>                // build empty rows
                  for (i=0; i&lt;len; i++) {
                      thisrow = prototype.clone();
                      thisrow.show();
                      thisrow.addClass('cell');
  </code></pre>
  
  <p>Here, I remove the prototype class for each cell, so I can identify all of my "Cells" by the ".cell" class</p>
  
  <pre><code>                    thisrow.removeClass('prototype');
                      thisrow.attr("id","cell_"+i);
                      shell.append(thisrow);
                  }
                  shell.listview("refresh");
  
                  for(i=0; i&lt;len; i++) {
                      // map available fields
                      thisrow = shell.find(".cell").eq(i);
                      pTitle = shell.find(".title").eq(i+1);
                      pSubtitle1 = shell.find(".subtitle1").eq(i+1);
                      pSubtitle2 = shell.find(".subtitle2").eq(i+1);
                      pJumper = shell.find(".execBrowse").eq(i+1);
                      // log row info
                      console.log("Row = " + i + " content = " + 
  results.rows.item(i).code_content);
                      // is hyperlink?
                          if (/^http[s]?\:\/\//.test(results.rows.item(i).code_content)) {
                              thisrow.find(".sub-menu").show();
                              pJumper.attr("href",results.rows.item(i).code_content);
  
                                  // yes is a hyperlink
  
  ...                                     
  pTitle.html(results.rows.item(i).code_content);
  ...
  </code></pre>
  
  <p>All this works fine and good, and produces a listview that looks as I expect it to - the problem is, the data-filter attribute does not work for searching this dynamically created listview. Any thoughts? Much appreciated!</p>