Question

这是我的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();
    });

除了顶部的搜索栏外没有显示。我错过了什么？

Answer 1

你有

data-role="list-view"

正确的方式

data-role="listview"

这就是为什么顶部的搜索栏不会出现的原因。

Answer 2

而不是调用$('#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.

Answer 3

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

Answer 4

你必须致电：

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

完成使用jscript填充列表后。

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

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

请参阅jqm documentation

jQuery Mobile - listview（），包含data-filter =“true”和ajax内容

4 个答案: