jQuery Mobile 列表视图：初始化错误答案

【问题标题】：jQuery Mobile List View: initialize errorjQuery Mobile 列表视图：初始化错误
【发布时间】：2012-03-27 01:59:52
【问题描述】：

我认为这有一个简单的解决方案。

我有一个列表，我想把它做成一个列表视图。东西是动态添加的。

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 不能在初始化之前调用 listview 上的方法；试图调用方法“刷新”

当我将其更改为 $("#friends_list_view ul").listview(); 时，我得到：

未捕获的类型错误：无法读取属性 'jQuery16409763167318888009' 未定义的

【问题讨论】：

尝试不使用 ul: $("#friends_list_view").listview();
@Phill Do dice :( 奇怪的是它可以使用那个确切的代码，但另一个页面上的 id 不同......

标签： jquery html listview jquery-mobile

【解决方案1】：

带有列表视图的页面可能未初始化。尝试先调用它：

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

【讨论】：

【解决方案2】：

jQM PageInit() 文档：

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

pageinit
在初始化页面后触发。我们建议绑定到此事件而不是 DOM ready() 因为无论页面是否直接加载，或者如果内容作为一部分被拉入另一个页面的 Ajax 导航系统。

试试这个：

http://jsfiddle.net/GVCHF/

$( '#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>

【讨论】：