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

Question

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

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