这是我正在构建的示例移动应用程序。问题出现在“搜索”选项卡中。当用户单击“提交”时，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>
最佳答案
尝试克隆初始元素，并在每次对其执行任何操作之前将其替换为已保存克隆的克隆。
这样的事情应该有效:
window.store=$('#search-results').clone();
$("#search-form").submit(function(){
$('#search-results').after(window.store.clone()).remove();
$('#search-results').listview();
//no clear needed
波沃泽尼亚;)
关于jQuery 移动列表功能不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5338307/