无法更新复选框的动态列表
Not able to updating dynamic list of checkboxes
有人能帮我吗？我应该怎么做才能刷新"删除位置"页面上的下拉列表。它由localstorage.city填充。
单击"打开面板"，然后单击"删除位置"。在这里，您将看到我通过单击"添加位置"按钮添加的城市列表。
删除一些位置，然后单击"删除位置"按钮。您会注意到以前删除的位置仍然存在。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" /> <!-- came from cordova -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
<script>
var SectedCityCode, URL, prov;
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- <script src="js/cities.js"></script> -->
<script>
$(document).on("pagecreate", function() {
// Save settings
$( "#myPanel" ).panel({
beforeopen: function( event, ui ) {}
});
$( "#myPanel" ).on( "panelbeforeopen", function( event, ui ) {} );
$("#myPanel").on("panelclose", function(event, ui) {
if (typeof(Storage) !== "undefined") {
localStorage.adl = $("#checkbox-h-2a").is(":checked");
}
});
$('#btnDelCity').click(function() {
var list = '';
$("#delcity input:checkbox:not(:checked)").each(function() {
if (list == '')
list = $(this).val();
else
list = list + ',' + $(this).val();
});
//localStorage.clear();
localStorage.city = list;
alert(localStorage.city);
$.mobile.changePage("#home", { reloadPage: true });
//$.mobile.navigate( "#home" );
});
$('#btnRemoveCity').click(function() {
$.mobile.changePage("#delLocations", { reloadPage: true });
//$.mobile.navigate( "#home" );
});
});
</script>
</head>
<body>
<!-- Start of first page -->
div data-role="page" id="home">
<div data-role="panel" id="myPanel" data-display="overlay">
<!-- panel content goes here -->
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">Auto Detect Location</label>
<a href="#addLocations" class="ui-btn">Add Locations</a>
<a href="#delLocations" id='btnRemoveCity' class="ui-btn">Remove Locations</a>
</fieldset>
</div><!-- /panel -->
<div data-role="header">
<h1>Test</h1>
<a href="#myPanel" data-icon="gear" class="ui-btn-right">Open Panel</a>
</div><!-- /header -->
<div data-role="content">
<div data-role="main" class="ui-content">
<p>content will go here</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- end of first page -->
<div data-role="page" id="addLocations" data-cache="false">
<div data-role="header">
<h1>Add Locations</h1>
<a href="#home" data-icon="home" class="ui-btn-right">Home</a>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" id="citynames">
</ul>
</div>
<div data-role="footer">
<h1>Locations Footer</h1>
</div>
<script>
$(document).on('pagebeforecreate', '#addLocations', function(){
var cities = [{
"code": "s0000768",
"englishnames": "City 1"
}, {
"code": "s0000001",
"englishnames": "City 2"
}, {
"code": "s0000404",
"englishnames": "City 3"
}];
//bind cities to addLocations
cities.sort(function(a, b) {
return a.englishnames.localeCompare(b.englishnames);
});
$.each(cities, function(i, obj) {
$("#citynames").append("<li data-name='" + obj.englishnames + "'>" + obj.englishnames + "</li>");
});
/* delegation */
//localStorage.clear();
$("#citynames").on("click", "li", function() {
if (localStorage.city == '')
localStorage.city = $(this).attr('data-name');
else
localStorage.city = localStorage.city + ',' + $(this).attr('data-name');
alert(localStorage.city);
});
});
</script>
</div>
<div data-role="page" id="delLocations">
<div data-role="header">
<h1>Remove Locations</h1>
<a href="#home" data-icon="gear" class="ui-btn-right">Home</a>
</div>
<div data-role="main" class="ui-content">
<form id='delcity'>
</form>
</div>
<div data-role="footer">
<h1>Locations Footer</h1>
</div>
<script>
//$(document).on('pagebeforeshow', '#delLocations', function(){
$(document).on('pagebeforecreate', '#delLocations', function(){
if (typeof(Storage) !== "undefined") {
if (!(localStorage.city == '')){
alert("about to create checkboxes");
var savedCities = localStorage.city;
alert(savedCities);
var arr = [];
arr.length = 0;
$("#delcity").trigger('reset');
$("#delcity").empty();
arr = savedCities.split(',');
$.each(arr, function(i, val){
$("#delcity").append("<label><input id='chk" + i + "' type='checkbox' value='" + val + "'>" + val + "</label>");
});
$("#delcity").append("<a href='#delLocations' id='btnDelCity' class='ui-btn'>Remove</a>");
}
}
});
</script>
</div>
</body>
</html>
https://jsfiddle.net/dLsLo94r/13/
Joe
pagebeforecreate只运行一次，而不是每次访问页面时都运行。对于删除页面，您可以在每次访问该页面时使用pagebeforeshow重新生成城市列表。
$(document).on('pagebeforeshow', '#delLocations', function() {
$("#delcity").empty();
if (typeof(Storage) !== "undefined") {
if (!(localStorage.city == '')) {
var savedCities = localStorage.city;
arr = savedCities.split(',');
$.each(arr, function(i, val) {
$("#delcity").append("<label><input id='chk" + i + "' type='checkbox' value='" + val + "'>" + val + "</label>");
});
$("#delcity").append("<a href='#delLocations' id='btnDelCity' class='ui-btn'>Remove</a>").enhanceWithin();
}
}
});
然后对动态创建的删除按钮上的点击事件使用事件委派：
$(document).on("click", '#btnDelCity', function() {
var list = '';
$("#delcity input:checkbox:not(:checked)").each(function() {
if (list == '')
list = $(this).val();
else
list = list + ',' + $(this).val();
});
localStorage.city = list;
alert(localStorage.city);
$.mobile.navigate( "#home" );
});
更新DEMO
相关文章：
- 如何在javascript而不是jquery中添加动态列表
- android phonegap jquery点击动态列表中的元素
- JSP中的动态列表框
- 使用PhoneGap和jQuery Mobile在android设备上显示动态列表视图
- JQuery Mobile UL列表仍然不能用于动态列表
- 将项目添加到动态列表
- 谷歌应用程序脚本web应用程序动态列表从表单
- 在动态列表中单击的特定img上执行JQuery
- 在jquery中滚动动态列表视图
- 无法更新复选框的动态列表
- 我无法将变量从动态列表传递到php页面进行处理.这是我不理解的逻辑问题吗
- 在 asp.net c# 中通过 POST 传递动态列表
- 将元素附加到动态列表，但浏览器不会刷新 UI
- 不使用排序数组的动态列表排序
- 基于 Javascript/jQuery 的带缩进的动态列表
- 带有动态列表的离子标签
- Jquery Mobile 中的动态列表视图和按钮
- 更改动态列表项的 CSS
- 无法使用JSON响应通过JQuery Mobile生成动态列表视图
- 使用AJAX和javascript将动态列表模型发布回控制器
