我正在研究一个移动购物清单应用程序，该应用程序应该在创建购物列表时支持用户。
我使用jQuery移动框架轻松实现移动功能。
这是我使用HTML和JavaScript的第一个Web项目。
我创建了一个带有复选框的简单产品列表，它会自动创建的jQuery移动样式，并且立即看起来很棒：
<form action="demoform.asp" id="list" method="post" name="list">
<fieldset data-filter="true" data-input="#myFilter" data-role="controlgroup">
<label for="0">Banane</label>
<input id="0" name="products" type="checkbox">
<label for="1">Gurke</label>
<input id="1" name="products" type="checkbox">
<label for="2">Brokkoli</label>
<input id="2" name="products" type="checkbox">
<label for="3">Chinakohl</label>
<input id="3" name="products" type="checkbox">
<label for="4">Grünkohl</label>
<input id="4" name="products" type="checkbox">
<label for="5">Eisbergsalat</label>
<input id="5" name="products" type="checkbox">
</fieldset>
</form>
i然后编写了一个javascript函数，该功能采用数组，并以这种格式写入数组的内容：
var options = [
fruits = ['Banane','Gurke','Brokkoli','Chinakohl','Grünkohl','Eisbergsalat'],
drinks = ['Wasser','Cola','Fanta','Sprite','Pils','Radler']
];
function makeUL(array) {
// Create the list element:
var list = document.createElement('fieldset');
list.setAttribute("data-role", "controlgroup");
list.setAttribute("data-filter","true");
list.setAttribute("data-input","#myFilter");
for(var i = 0; i < array.length; i++) {
// Create the list item:
var label = document.createElement('label');
label.setAttribute("for",i);
// Set its contents:
label.appendChild(document.createTextNode(array[i]));
// Add it to the list:
list.appendChild(label);
var input = document.createElement('input');
input.setAttribute("type","checkbox");
input.setAttribute("name","products");
input.setAttribute("id",i);
// Add it to the list:
list.appendChild(input);
}
// Finally, return the constructed list:
return list;
}
// Add the contents of options[0] to #productlist:
document.getElementById('productlist').appendChild(makeUL(options[0]));
我遇到了与我的经验不足有关的几个问题，但这是最大的问题：
- jQuery Mobile将HTML i编写，并在加载页面时大大更改它。当我尝试更改HTML之后，Jquery Mobile做了它的魔术，它看起来不风格。我必须以某种方式告诉JQuery Mobile再次为此特定元素运行其脚本。我如何实现这一目标，在使用JQuery Mobile时，总体上有更好的方法吗？
jQuery Mobile正在调用controlgroup checkbox inputs的增强列表。
因此，您需要清空一组复选框输入的容器，添加所需的项目，然后刷新整个ControlGroup：
function makeUL(choice) {
var cases = {
"fruits": ['Banane', 'Gurke', 'Brokkoli', 'Chinakohl', 'Grünkohl', 'Eisbergsalat'],
"drinks": ['Wasser', 'Cola', 'Fanta', 'Sprite', 'Pils', 'Radler']
};
var array = cases[choice],
list = $("#list");
list.controlgroup("container").empty();
for (var i = 0; i < array.length; i++) {
var item = $("<label for='checkbox-" + i + "'>" + array[i] + "</label><input type='checkbox' id='checkbox-" + i + "'></input>");
list.controlgroup("container").append(item);
$(item[1]).checkboxradio();
}
list.controlgroup("refresh");
}
$(document).on("pagecreate", "#page-1", function() {
$("input[name*=radio-choice-wish]").click(function() {
var wish = $("input[name*=radio-choice-wish]:checked").val();
makeUL(wish);
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-1">
<div data-role="header" data-position="fixed">
<h1>Shopping List</h1>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>I wish...</legend>
<input name="radio-choice-wish" id="radio-choice-wish-fruits" value="fruits" checked="checked" type="radio">
<label for="radio-choice-wish-fruits">Fruits</label>
<input name="radio-choice-wish" id="radio-choice-wish-drinks" value="drinks" type="radio">
<label for="radio-choice-wish-drinks">Drinks</label>
</fieldset>
</div>
<form action="demoform.asp" id="list-form" method="post" name="list-form">
<fieldset data-filter="true" data-input="#myFilter" id="list" data-role="controlgroup">
</fieldset>
</form>
</div>
</div>
</body>
</html>请在此处查看：Dynamic ControlGroup