動態填充一個jQuery Mobile的列表視圖不破壞數據過濾

Question

已經有很多帖子使引用到

$('#ListViewID').listview("refresh") 

呼叫之後需要你動態修改被定義爲元素的DOM發生的一個listview。我沒有問題讓listview看起來正確。問題是，我標記了我的listview元素來使用jquery mobile的數據過濾功能。這與靜態列表視圖一起工作，但不會過濾我的列表視圖中動態填充的內容。我不是串聯一個字符串來創建我的列表視圖 - 我克隆了一個原型單元格。這是問題嗎？

這裏是我的代碼

// capture prototype 
     var prototype = $("#" + currentPage).find(".prototype"); 

識別原型後，我同樣鎖定在「殼牌」，這是列表視圖元素：

 var shell = $("#" + currentPage).find(".Rolodex"); 
     // declare variable for focus cell 
     var thisrow; 

.... 

       // map fields 
       var pTitle; 
       var pSubtitle1; 
       var pSubtitle2; 
       var pJumper; 
       var cellLock; 

在這裏，我複製原型細胞多次因爲我需要在

   // build empty rows 
       for (i=0; i<len; i++) { 
        thisrow = prototype.clone(); 
        thisrow.show(); 
        thisrow.addClass('cell'); 

數據來這裏，我刪除了原型類FO R各自細胞，這樣我就可以用「細胞」類識別所有的我的「細胞」

    thisrow.removeClass('prototype'); 
        thisrow.attr("id","cell_"+i); 
        shell.append(thisrow); 
       } 
       shell.listview("refresh"); 

       for(i=0; i<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); 
... 

所有這一切工作正常，良好，併產生一個ListView看起來像我期待它 - 問題是，數據過濾器屬性不適用於搜索此動態創建的列表視圖。有什麼想法嗎？非常感激！

Answer 1

這應該很容易。

我已經爲您創建了一個示例：http://jsfiddle.net/Gajotres/pCqjs/。

其中有一個小的listview和$ .ajax動態地附加更多的項目。新的itens可以通過過濾器搜索。

你需要檢查，如果您的動態生成的內容是相同的規格，它應該是這樣的（這是一個例子）：

<li> 
    <a href="#cars"> 
     <h3>Movie title: Jurasic Park</h3> 
     <p>Blah Blah Blah</p> 
    </a> 
</li>