title: Is it possible to use jQuery data-filter to filter items brought in from external HTMLl via .load?
body: <p>Is it possible to use jQuery <code>data-filter</code> to filter items brought in from external HTML via <code>.load</code>?</p>
  
  <p>I use jQuery's data-filter to allow users to filter lists, so that only list items which match their input are displayed.</p>
  
  <pre><code>&lt;div data-role="content"&gt;
    &lt;ul data-role="listview" data-icon="false" data-filter="true" data-filter-placeholder="Search..." data-inset="true"&gt;
  
      &lt;li data-role="list-divider"&gt; Characters &lt;/li&gt;
      &lt;li data-filtertext="apples:oranges"&gt;Group 1&lt;/li&gt;
      &lt;li data-filtertext="apples:bananas"&gt;Group 2&lt;/li&gt;
      ...
      &lt;li data-filtertext="monkeys:boxes"&gt;Group 200&lt;/li&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But, I want to move the list items to a separate html file, and call it using:</p>
  
  <pre><code>$("div[id^=menu]").each(function() {
    var match = this.id.match(/\w+$/)[0];
    $(this).load('menus/' + match + '.html');
  </code></pre>
  
  <p>So that I can replace all the list items with </p>
  
  <pre><code>&lt;div data-role="content"&gt;
    ul data-role="listview" data-icon="false" data-filter="true" data-filter-placeholder="Search..." data-inset="true"&gt;
  
    &lt;div id="menutest"&gt;&lt;/div&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On the index page, and have the lists in <code>menus/menutest.html</code></p>
  
  <p>At the moment, although this'll display the lists when index is loaded, they're just static on the page and it doesn't allow them to be filtered. Can this be done?</p>