Question

我正在开发一个应该在创建购物清单时支持用户的移动购物列表应用程序。

我使用Jquery Mobile框架轻松实现移动功能。

这是我的第一个使用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>

然后我写了一个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，并在加载页面时显着更改它。当我试图在Jquery Mobile发挥其魔力之后改变html它看起来没有样式。我必须以某种方式告诉Jquery Mobile再次为这个特定元素运行它的脚本。我如何实现这一点，使用Jquery Mobile时有更好的方法吗？

Answer 1

jQuery Mobile正在调用controlgroup checkbox inputs的增强列表。

所以你需要清空你的一组复选框输入的容器，添加所需的项目，然后刷新整个控制组：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

请在此处查看：Dynamic controlgroup

在jQuery Mobile中使用复选框动态创建产品列表证明是困难的

我遇到了一些与我的经验不足有关的问题，但这是最大的问题：

1 个答案: