jQuery移动列表功能无法正常工作

时间：2011-03-17 11:21:07

标签： jquery jquery-mobile

这是我正在构建的示例移动应用。问题出现在“搜索”标签中。当用户单击“提交”时，JSON对象列表将添加到ul列表的内容中。但是当用户返回搜索表单（例如更改搜索参数）并再次提交表单时，我需要清除列表，再次附加元素并显示。但每当我尝试在我的ul元素上运行任何listview函数时，我最终都会在整个应用程序的起始页面上运行。我已经尝试过'刷新'，'破坏'和不同的组合，但没有令人满意的结果。只使用一个listview（）调用就可以正常显示表单，但下一个没有正确设置样式。

<!DOCTYPE html> 
<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Page Title</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
        <style type="text/css">
            p {
                font-size: 11px;
            }

            .centered {
                text-align:center;
            }

            .search-detail {

            }            
        </style>        
    </head> 
<body> 

<!-- Start of first page -->
<div data-role="page" id="menu">
    <div data-role="header" data-position="fixed">
        <h1>Menu</h1>
    </div>
    <div data-role="content">   
        <ul data-role="listview" role=listbox"" data-theme="c">
            <li><a href="#page-1" data-transition="pop">About</a></li>
            <li><a href="page-2" data-transition="slide">Contact</a></li>
            <li><a href="page-3" data-transition="fade">Search</a></li>
        </ul>   
    </div>
    <div data-role="footer" data-position="fixed">
        <p class="centered">footer text</p>
    </div>
</div>

<!-- Start of second page -->
<div data-role="page" id="page-1">
    <div data-role="header" data-position="fixed">
        <h1>O nas</h1>
    </div>
    <div data-role="content">   
        <p>Code blah blah...</p>            
    </div>
    <div data-role="footer" data-position="fixed" data-id="myfooter">
        <p class="centered">footer text</p>
    </div>
</div>

<!-- Start of second page -->
<div data-role="page" id="page-2">
    <div data-role="header" data-position="fixed">
        <h1>Contact</h1>
    </div>
    <div data-role="content">   
        <p>Code blah blah...</p>        
    </div>
    <div data-role="footer" data-position="fixed" data-id="myfooter">
        <p class="centered">footer text</p>
    </div>
</div>

<!-- Start of third page -->
<div data-role="page" id="page-3">
    <div data-role="header" data-position="fixed">
        <h1>Search</h1>
    </div>
    <div data-role="content">   
        <form action='' method='post' data-theme="d" id="search-form">
            <!-- <div data-role="fieldcontain"> -->
                <select multiple="multiple" id="select-choice-9" name="select-choice-9" tabindex="-1">
                    <option>Choose city</option>
                    <option value="warszawa">Warszawa</option>
                    <option value="katowice">Poznań</option>
                    <option value="krakow">Kraków</option>
                </select>           
            <!-- </div> -->

            <div data-role="fieldcontain">
                <label for="slider-2">Available space :</label>
                <input type="number" data-type="range" max="5000" min="0" value="500" id="slider-2" name="slider-2">
            </div>     

            <button type="submit">Submit</button>        
        </form> 
    </div>
    <div data-role="footer" data-position="fixed" data-id="myfooter">
        <p class="centered">footer text</p>
    </div>
</div>

<!-- Start of third page -->
<div data-role="page" id="page-4">
    <div data-role="header" data-position="fixed">
        <h1>Search results</h1>
    </div>
    <div data-role="content">
        <ul role="listbox" id="search-results" data-theme="c">

        </ul>    
    </div>
    <div data-role="footer" data-position="fixed" data-id="myfooter">
        <p class="centered">footer text</p>
    </div>
</div>

<script type="text/javascript">
    var data = [{
"id":"1",
"name":"City Point",
"city": "Warszawa",
"free_size": "23587",
"image": "http://magazyny.pl/static/realestate/wp/wpp157867149156355.jpg.75x46_q85_crop.jpg",
"developer": "VALAD"
},
{
"id":"2",
"name":"Point Park Poznań",
"city": "Poznań",
"free_size": "21600",
"image": "http://magazyny.pl/static/realestate/wp/wpp-210090413292956.jpg.75x46_q85_crop.jpg",
"developer": "Point Park Properties",
},
{
"id":"3",
"name":"City Point",
"city": "ProLogis Poznań Park II",
"free_size": "17775",
"image": "http://magazyny.pl/static/realestate/wp/wpp208075492646126.jpg.75x46_q85_crop.jpg",
"developer": "ProLogis"
},
{
"id":"4",
"name":"Żerań Park I",
"city": "Warszawa",
"free_size": "14010",
"image": "http://magazyny.pl/static/realestate/wp/wpp-98178239484070.jpg.75x46_q85_crop.jpg",
"developer": "Heitman"
},
{
"id":"5",
"name":"Manhattan Distribution Center",
"city": "Warszawa",
"free_size": "5184",
"image": "http://magazyny.pl/static/realestate/wp/wpp-93618025184421.jpg.75x46_q85_crop.jpg",
"developer": "Heitman"
},
{
"id":"6",
"name":"Tulipan Park Poznań II",
"city": "Poznań",
"free_size": "4860",
"image": "http://magazyny.pl/static/realestate/wp/wpp163586398858964.jpg.75x46_q85_crop.jpg",
"developer": "Segro"
},
{
"id":"7",
"name":"Platan Park",
"city": "Warszawa",
"free_size": "3915",
"image": "http://magazyny.pl/static/realestate/wp/wpp-137028541192797.jpg.75x46_q85_crop.jpg",
"developer": "Platan Group"
},
{
"id":"8",
"name":"ProLogis Park Poznań I",
"city": "Poznań",
"free_size": "3240",
"image": "http://magazyny.pl/static/realestate/wp/wpp154210374046076.jpg.75x46_q85_crop.jpg",
"developer": "ProLogis"
},
{
"id":"9",
"name":"Ursus Logistic Center",
"city": "Warszawa",
"free_size": "3240",
"image": "http://magazyny.pl/static/realestate/wp/wpp176885389187907.jpg.75x46_q85_crop.jpg",
"developer": "Orpol"
},
{
"id":"10",
"name":"Żerań Park II",
"city": "Warszawa",
"free_size": "3150",
"image": "http://magazyny.pl/static/realestate/wp/wpp-114950647511829.jpg.75x46_q85_crop.jpg",
"developer": "Apollo Rida"
}]; 

    var clear = function(){
        console.log('clear');
        document.getElementById('search-results').innerHTML = '';
    }       

    var searchObjects = [];
    $(document).ready(function(){
        //wrapper na submit formularza nadpisujacy domyslna akcje z jQm
        $("#search-form").submit(function(){
                $('#search-results').listview();
                //$("#search-results").listview("destroy");
                clear();
                $.each(data, function(i, m) {
                    $('#search-results').append(''+
                        '<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" tabindex="0" data-theme="c">'+
                        '<div>'+
                        '<img src=\"'+ m.image +'\" class="ui-li-thumb">'+
                        '<h3 class="ui-li-heading"><a href="index.html" class="ui-link-inherit">'+ m.name +'</a></h3>'+ 
                        '</div>'+
                        '<div class=\"search-detail\"><p>'+ m.developer +'</p></div>'+
                        '<div class=\"search-detail\"><p>'+ m.city  +'</p></div>'+
                        '<span class="ui-icon ui-icon-arrow-r"></span></li>'
                    );
                    //$('#search-results').listview('refresh');           
                    searchObjects.push(m);
                });
                //$("#search-results").listview('destroy');
                $('#search-results').listview();
                //$('#search-results').listview('refresh');
                $.mobile.changePage('page-4', 0, 'page-3');
           return false;
        });
    });
</script>
</body>

1 个答案:

答案 0 :(得分：3)

尝试克隆初始元素，并在每次执行任何操作之前将其替换为已保存克隆的克隆。

这样的事情应该有效：

window.store=$('#search-results').clone();

$("#search-form").submit(function(){
   $('#search-results').after(window.store.clone()).remove();
   $('#search-results').listview();
   //no clear needed

Powodzenia;）

相关问题
最新问题