JQuery Mobile動態列表視圖篩選器不顯示

我是jquery mobile的新手，不知何故成功創建了一個主頁，現在又創建了一個子頁面（標記爲「bible_studies」）和一個通過AJAX動態創建的列表。JQuery Mobile動態列表視圖篩選器不顯示

該列表看起來很棒，除了一件事之外，一切正常，即使我將數據過濾器設置爲true，過濾器根本沒有出現。我已經嘗試了很多我無法看到的東西......任何人都可以協助？

<!DOCTYPE html> 
<html> 
<head> 
<title>Tetelestai Church Mobile | Home</title>  
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 
<link href="styles/mobile.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<style> 
    .ui-li-thumb, .ui-li-icon { 
     left: 1px; 
     max-height: 125px; 
     max-width: 125px; 
     position: absolute; 
     top: 0; 
    } 
    #wrap{margin-left:50px;} 
</style> 
</head> 
<body id="home"> 

<!-- Start of first page --> 
<div data-role="page" id="home"> 

<h2 id="banner">Tetelestai Church Mobile</h2> 
<div data-role="content"> 
    <ul data-role="listview" data-inset="true"> 
     <li><a href="#bible_studies"><img src="../images/star.png" alt="Bible Studies" class="ui-li-icon">Bible Studies</a></li> 
     <li><a href="#events"><img src="../images/events.png" alt="Events" class="ui-li-icon">Events</a></li> 
     <li><a href="#news"><img src="../images/news.png" alt="Announcements" class="ui-li-icon">Announcements</a></li> 
     <li><a href="#map"><img src="../images/map.png" alt="Times And Directions" class="ui-li-icon">Directions</a></li> 
     <li><a href="#contact"><img src="../images/contact.png" alt="Contact Us" class="ui-li-icon">Contact Us</a></li> 
    </ul> 



    <ul data-role="listview" data-inset="true" data-theme="e"> 
     <li> 
      <a href="http://www.tetelestai.org" data-ajax="false" rel="external"><img src="../images/full_screen.png" alt="Full Site" class="ui-li-icon">Full Site</a> 
     </li> 
    </ul> 
    </p> 
</div><!-- /content --> 

</div><!-- /page --> 

<div data-role="page" id="bible_studies"> 
<header data-role="header" data-theme="b"> 
    <h1>Tetelestai Bible Studies</h1> 
</header> 
<article data-role="content" id="bs"> 
</article> 

</div> 

<script type="text/javascript"> 

//On document ready 
$(document).ready(function(){ 

    //----------------------------------------------------------------------- 
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/ 
    //----------------------------------------------------------------------- 
    $.ajax({          
     url: "../data/series.php",     //the script to call to get data   
     data: "",      //you can insert url argumnets here to pass 
             //for example "id=5&parent=6" 
     dataType: 'json',    //data format  
     success: function(data)   //on recieve of reply 
     { 

      //-------------------------------------------------------------------- 
      // 3) Update html content 
      //-------------------------------------------------------------------- 
      var list = $('<ul data-role="listview" data-filter="true" id="series"/>'); 

      //Loop through each series 
      $.each(data, function(key, val) { 

       //Create list item 
       $('<li><a href="#'+val.series+'"><img src="../assets/video/'+val.series+'/mobile_list_image.jpg" alt="'+val.name+'" /><div id="wrap"><h1>'+val.name+'</h1><p>'+val.description+'</p></div></a></li>').appendTo(list); 

      }) 

      //Add list 
      list.listview(); 
      list.appendTo('#bs'); 

     } 
    }); 
});

來源

2013-03-21 Ephezius

你有一個技術性錯誤。當你創建像這樣的列表變量：

var list = $('<ul data-role="listview" data-filter="true" id="series"/>');

您需要立即將其添加到#BS內容，就像這樣：

var list = $('<ul data-role="listview" data-filter="true" id="series"/>').appendTo('#bs');

最終濾芯是不是UL列表視圖的一部分，因爲您使用.listview（）對其進行了樣式化，然後將其附加到內容中，但不會附加filer元素。

我做了一個例子來告訴你我在說：http://jsfiddle.net/Gajotres/67dst/

或者說，我認爲這也將工作，只是改變這行：

 list.listview(); 
     list.appendTo('#bs');

這樣：

 list.appendTo('#bs'); 
     list.listview();

這應該也是有效的，因爲listviev會被應用於.listview（）之前。

來源

2013-03-21 19:05:26 Gajotres

修好了!!!非常感謝！ – Ephezius 2013-03-21 19:22:17

JQuery Mobile動態列表視圖篩選器不顯示

回答

相關問題