jQuery Mobile - 带有 data-filter="true" 和 ajax 内容的 listview()答案

【问题标题】：jQuery Mobile - listview() with data-filter="true" and ajax contentjQuery Mobile - 带有 data-filter="true" 和 ajax 内容的 listview()
【发布时间】：2011-11-29 06:11:50
【问题描述】：

这是我的html：

<ul data-role="list-view" data-filter="true"></ul>

我的 JS 用数据加载 ul，然后我调用 listview()。

$('#page').live('pagebeforecreate', function(){
        // My Ajax code
    });
    $('#page').live("pageinit", function(){
        $('#page ul').listview();
    });

除了顶部的搜索栏没有出现之外，这有效。我错过了什么？

【问题讨论】：

标签： ajax jquery jquery-mobile

【解决方案1】：

你有

data-role="list-view"

当正确的方法是

data-role="listview"

这就是顶部的搜索栏没有出现的原因。

【讨论】：

【解决方案2】：

我认为您需要使用$('#page ul').listview('refresh'); 而不仅仅是$('#page ul').listview();。通过 Ajax 更新 jQuery-Mobile 组件时需要刷新它。

【讨论】：

如果我这样做，那么我在 firebug 中得到这个错误：未捕获的异常：无法在初始化之前调用 listview 上的方法；试图调用方法“刷新”
你写的是data-role="list-view"而不是data-role="listview"。可能和它有关吗？

【解决方案3】：

你必须打电话：

$('#page ul').listview('create');

使用 jscript 填充列表后。

要刷新其内容（仅在创建后），您可以调用：

$('#page ul').listview('refresh');

见jqm documentation

【讨论】：

【解决方案4】：

而不是调用$('#page').live("pageinit", function(){ $('#page ul').listview(); });

执行以下操作：

  $('#page').live("pageinit", function(){
    init();
    });


<ul id="mylist" data-role="listview" data-theme="b" data-filter="true" >

</ul>

function init()
{
    type: "GET",
   $.ajax({
     url: "BirthdayInvitations.xml",
    dataType: "xml",
    success: function ParseXml(xml)
    {
         $(xml).find("event").each(function() {  
     $("#mylist").append('<li><a href="' + "#" + '">' +this.textContent + '</a></li>');
     }); 
     $("#mylist").listview('refresh');   
     }}); 

   }

This is working i tried it out and i am using in my application.

【讨论】：

这对我不起作用。我在 firebug 中遇到了这个错误：未捕获的异常：在初始化之前无法调用 listview 上的方法；试图调用方法“刷新”