在 jQuery Mobile 中使用复选框动态创建产品列表非常困难

Posted

技术标签:

【中文标题】在 jQuery Mobile 中使用复选框动态创建产品列表非常困难【英文标题】：Dynamically creating productlists with checkboxes in jQuery Mobile proves difficult 【发布时间】：2017-05-10 14:28:18 【问题描述】：

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

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

这是我第一个使用 html 和 javascript 的 Web 项目。

我创建了一个带有复选框的简单产品列表，Jquery mobile 自动对其进行样式设置，并且立即看起来很棒：

<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 时一般有更好的方法吗？

【问题讨论】：

是的，它发生在使用动态 html 时。这个问题在here 上有一些非常好的答案 【参考方案1】：

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

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

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

【讨论】：

以上是关于在 jQuery Mobile 中使用复选框动态创建产品列表非常困难的主要内容，如果未能解决你的问题，请参考以下文章

自定义列表视图，带有jQuery Mobile中的复选框，图像和按钮

ajax调用后，jquery mobile在复选框上没有样式

jQuery Mobile 复选框 CSS

jQuery Mobile 的 Listview 小部件中的复选框列

jQuery Mobile 表单

jQuery Mobile 表单