在可折叠 jquery-mobile 中添加可动态过滤的控制组

Question

我正在尝试制作可折叠的盒子，它将包含可以过滤的项目控制组。 controlgroup 内的内容应该根据数据库结果动态生成。问题是它不输出它。我设法使控制组在可折叠框外工作，但不能在其中工作。它不会显示任何结果。

HTML:

<div data-role="collapsible" id="collapsible_box">
    <form>
        <input type="text" data-type="search" id="filter_input" placeholder="search content...">
    </form>
    <form data-role="controlgroup" data-filter="true" data-filter-reveal="true" data-input="#filter_input" id="list_of_results">
        <!--here we get dynamically results from database-->
    </form>
</div>

JAVASCRIPT: 通过 ajax 响应获取数据。在 "pagebeforeshow" 事件上调用。

var data = response;
var out = "";

for(var i=0; i < data.result.length; i++) {
    out += '<input type="radio" name="result" id="' + data.result[i].name + '" value="' + data.result[i].name + '">';
}
//add output to the page
$("#list_of_results").html(out).enhanceWithin().controlgroup("refresh");

我收到这个错误：

Uncaught Error: cannot call methods on controlgroup prior to initialization; attempted to call method 'refresh'

Answer 1

您也应该刷新可过滤小部件：http://api.jquerymobile.com/filterable/#method-refresh

$("#list_of_results").html(out).enhanceWithin().controlgroup("refresh").filterable("refresh");

此外，可折叠小部件需要一个标题

<div data-role="collapsible" id="collapsible_box">
    <h4>Heading</h4>
    ...

DEMO