1

我是 jquery mobile 的新手，并且不知何故想出了如何成功创建主页和现在的子页面（标记为“bible_studies”）以及通过 AJAX 动态创建的列表。

该列表看起来很棒，除了一件事之外一切都在工作......过滤器根本没有显示，即使我将数据过滤器设置为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');

        }
    });
});

4

1 回答 1

2

你有一个技术错误。当您创建这样的列表变量时：

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');

Final Filter 元素不是 ul listview 的一部分，并且因为您在将其附加到内容之前使用 .listview() 对其进行了样式设置，所以未附加 filer 元素。

我举了一个例子来告诉你我在说什么：http: //jsfiddle.net/Gajotres/67dst/

或者，我认为这也可以，只需将其更改为行：

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

对此：

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

这也应该有效，因为 listviev 在 .listview() 应用于它之前附加到内容。

于 2013-03-21T19:05:26.803 回答