title: jquery mobile: multiple data-filters showing
body: <p>I am attempting to create a listview control in jquery-mobile that has the ability for certain list items to expand and show child items. My goal is that this list is filterable, and the jquery-mobile data-filter="true" attribute is sufficient.  Unfortunately, it seems to be inherited by &lt; u l > and &lt; o l > elements inside, and I end up with multiple filter controls.  Is there a best practice for preventing this type of inheritence in jquery?  Using jquery to remove extraneous form tags is a hack that works, but I'd rather do it as designed.</p>
  
  <p>Here is a quick example:</p>
  
  <pre><code>&lt;div data-role="content"&gt;
    &lt;div class="choice_list"&gt;
      &lt;h2&gt;Select an item&lt;/h2&gt;&lt;br /&gt;
      &lt;ul data-role="listview" data-inset="true" data-filter="true"&gt;
        &lt;li&gt;&lt;a&gt;Item&lt;/a&gt;&lt;/li&gt;
        &lt;li data-role="collapsible"&gt;
          &lt;h3&gt;Super Item&lt;/h3&gt;
          &lt;ul data-role="listview" data-inset="true"&gt;
            &lt;li&gt;&lt;a&gt;Sub Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please take a look at this JSFiddle for an example: <a href="http://jsfiddle.net/harlomic/SsJjS/3/" rel="nofollow">http://jsfiddle.net/harlomic/SsJjS/3/</a>.</p>