2012-02-01 2 views
1

jQuery-Mobileでは、新しいアイテムをlistviewコンポーネントに追加するときにフィルタリングされません。リストビューフィルタで新しいアイテムがフィルタリングされない

私のhtmlコードは次のとおりです。あなたが( 'XXXX' のような)非既存の値を検索する場合、いくつかの新しいアイテムを追加した後

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; 
     } 
    ); 
}); 

<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> 

そして、私はこれをテストしていますすべての要素をフィルタリングする必要があることをコンソールに示します。ただし、新しい項目は決してフィルタリングされません。

誰でも何が起こっているか知っていますし、どうすれば新しいアイテムをフィルタリングできますか?前もって感謝します。

例はここにある:http://jsfiddle.net/vuyuh/8/

答えて

3

jQueryの機能フェードイン "スタイルを:ブロック;" を追加プロパティが実行された後、リスト要素が常に表示されるようにします。技術的には、リストビューはそれに対処していたはずですが、明らかにそうではありません。

だから、何をしなければならないことは、新たなリスト要素にフェードインした後、スタイルプロパティを削除することです

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

更新jsfiddle起こる:http://jsfiddle.net/vuyuh/10/

関連する問題