Question

使用jQuery-Mobile，当我向listview组件添加新项目时，它们不会被过滤。

我的HTML代码是：

<div data-role="page" id="testPage">
  <div data-role="header">
      <h2>Test add item</h2>
  </div>
  <div data-role="content" id="content">      
    <ul data-role="listview" id="myList" data-filter="true">
      <li><h3>AAAA</h3></li>
      <li><h3>BBBB</h3></li>
      <li><h3>CCCC</h3></li>
      <li id="liBtn"><a href="#" onclick="addItem();">Add Listitem</a></li>
    </ul>
  </div>
</div>

我测试了这个：

function addItem() {
   $('#liBtn').remove();
   $('#myList').append('<li class="newItem"><h3>ZZZZ</h3></li><li id="liBtn"><a href="#" onclick="addItem();">Add Listitem</a></li>').listview('refresh');
   $('.newItem').hide().fadeIn('slow').removeClass('newItem');
}

$('#testPage').live('pageshow', function() {
    $("#myList").listview('option', 'filterCallback', 
        function( text, searchValue ) {
          var filter = text.toLowerCase().indexOf( searchValue ) === -1;
          console.log(text + ', filter:' + filter);
          return filter;
        }
    );
});

添加一些新项目后，当您搜索不存在的值（如“XXXX”）时，它会在控制台中指示应该过滤每个元素。但是，新项目永远不会被过滤。

任何人都知道发生了什么以及如何过滤新项目？提前谢谢。

示例如下：http://jsfiddle.net/vuyuh/8/

Answer 1

jQuery函数 fadeIn 添加“style：block;”执行后的属性，以便列表元素始终可见。从技术上讲，listview应该处理它，但显然它不是。

因此，您需要做的是在新列表元素上的fadeIn发生后删除样式属性

$('.newItem').hide().fadeIn('slow', function() {
        $(this).attr('style', null);
}).removeClass('newItem');

更新了jsfiddle：http://jsfiddle.net/vuyuh/10/

Listview过滤器不过滤新项目

1 个答案: