Javascript 在可折叠jquery mobile中添加动态可筛选的控制组

我试图制作一个可协作的盒子，里面有一组可以过滤的控制项。controlgroup中的内容应根据数据库结果动态生成。问题是它没有输出它。我设法让controlgroup在可折叠的盒子外面工作，但在里面却不行。它不会显示任何结果

HTML:

---

您还应该刷新可筛选小部件：

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

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

标题
...

---

您也应该刷新可过滤小部件：

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

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

标题
...

---

我收到这个错误“未捕获错误：无法在初始化之前调用controlgroup上的方法；试图调用方法“刷新”。我正在调用pagebeforeshow方法中的javascript函数。@J-ho，我将代码笔更改为使用pagebeforeshow，它仍然可以正常工作。你能编辑代码笔来重现你的错误吗？如果我只做

$（“#结果列表”）.html（out）.enhanceWithin（）它显示结果，但在尝试筛选结果时不更新结果。但是，如果我将
$（“#结果列表”）.html（out）.enhanceWithin（）.controlgroup（“刷新”）.filterable（“刷新”），它没有显示任何内容，我甚至没有收到任何错误。@J-ho，使用data filter reveal=“true”在您键入搜索条件之前不会显示任何内容…我最终发现了问题：我有一个名为“something something”的过滤器id标记，它毁了它，因为它有“-”doh。将其简单地更改为“”。伪打字错误。。奇怪的是，如果您将“id标记”更改为“-”，我认为它在您的演示中会起作用。我得到了以下错误“未捕获错误：无法在初始化之前调用controlgroup上的方法；尝试调用方法“刷新”。我正在调用pagebeforeshow方法中的javascript函数。@J-ho，我将代码笔改为使用pagebeforeshow，它仍然可以正常工作。你能编辑代码笔来重现你的错误吗？如果我只做
$（“#结果列表”）.html（out）.enhanceWithin（）它显示结果，但在尝试筛选结果时不更新结果。但是，如果我将
$（“#结果列表”）.html（out）.enhanceWithin（）.controlgroup（“刷新”）.filterable（“刷新”），它没有显示任何内容，我甚至没有收到任何错误。@J-ho，使用data filter reveal=“true”在您键入搜索条件之前不会显示任何内容…我最终发现了问题：我有一个名为“something something”的过滤器id标记，它毁了它，因为它有“-”doh。将其简单地更改为“”。伪打字错误。。奇怪的是，如果你将“id标签”改为“-”，我认为它在你的演示中是有效的。
Uncaught Error: cannot call methods on controlgroup prior to initialization; attempted to call method 'refresh'

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

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