在 jQuery Mobile 中动态插入扩展器

Question

我对 jQuery 很陌生，目前对尝试将动态创建的扩展器插入 jQuery-Mobile 页面感到绝望，如下所示：

<div data-role="page" id="myPage">
  <div data-role="content">
    <div id="myContainer"></div>
  </div>
</div>

由于扩展器应该插入到“myContainer”中，所以我在写：

var expander = $("<div data-role='collapsible' data-collapsed='true'><h3 class='category' /><div class='content' /></div>");
$("#myContainer").append(expander);
expander.find(".category").text(/*Some text*/);
expander.find(".content").text(/*Some text*/);

但是，我的文档中只出现了一个非主题且不可折叠的 div。

我想，我将不得不手动切换扩展器的创建，类似于刷新列表视图 - 但是我在文档中没有找到任何相关内容。

不幸的是，两者都没有

expander.Refresh();
//nor
expander.Expander();

似乎存在。

非常感谢您的回复！

Answer 1

这个问题实际上是重复出现的，所以我创建了一个关于它的常见问题解答。

您需要在添加到 DOM 的最顶层元素上使用 .page()。

详情请看这里： http://jquerymobiledictionary.dyndns.org/faq.html

[编辑]

我也曾想在page* 事件中使用.page，而解决方案对我来说相当明显——使用信号量。

如果你不知道如何实现信号量，可以看我的双列插件代码为例（在同一个站点）