jQuery Mobile列表視圖：初始化錯誤

Question

我認爲這有一個簡單的解決方案。

我有一個列表，我想成爲一個列表視圖。東西被動態添加到它。

HTML：

<div data-role="content" data-theme="b" class="content-primary"> 
    <div id="friends_list_view" class="content-primary" data-theme="c"> 
     <ul data-role="listview" data-filter="true" data-theme="c"> 
     </ul> 
    </div> 
</div> 

的jQuery：

for(i in names){ 
     listString = '<li><a href="#">'+i+'</a></li>'; 
     $("#friends_list_view ul").append(listString); 
} 

$("#friends_list_view ul").listview('refresh'); 
$.mobile.hidePageLoadingMsg(); 
$.mobile.changePage("#friends", { transition: "slide"}); 

我得到：

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh'

當我改變它只是$("#friends_list_view ul").listview();我得到：

Uncaught TypeError: Cannot read property 'jQuery16409763167318888009' of undefined

Answer 1

JQM PageInit（）文檔：

• http://jquerymobile.com/test/docs/api/events.html

pageinit
Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

嘗試這種情況：

• http://jsfiddle.net/GVCHF/

JS

$('#home').live('pageinit',function(event){ 
    var names = ['Bob','Bill','Phill','Will']; 
    var listString = ''; 
    for(i in names) { 
      listString += '<li><a href="#">'+i+'</a></li>'; 
    } 
    $("#friends_list_view ul").append(listString); 

    $("#friends_list_view ul").listview('refresh'); 
    $.mobile.hidePageLoadingMsg(); 
    $.mobile.changePage("#friends", { transition: "slide"}); 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content" data-theme="b" class="content-primary"> 
     <div id="friends_list_view" class="content-primary" data-theme="c"> 
      <ul data-role="listview" data-filter="true" data-theme="c"> 
      </ul> 
     </div> 
    </div> 
</div>​ 

Answer 2

使用ListView的頁面可能沒有被初始化。嘗試先打電話：

$('#pageWithListview').page();