Jquery mobile 可折叠集，jQuery Mobile，注入AJAX内容

给定一个基本的jQuery Mobile可折叠集，如何在触发切换事件之前获取AJAX内容？我正在使用jQM创建以下内容：

<div id="test" data-role="collapsible-set" data-inset="false">
  <div data-role="collapsible" data-collapsed="true" data-mini="true">
    <h2>Title #1</h2>
    <ul data-role="listview"></ul>
  </div>
  <div data-role="collapsible" data-collapsed="true" data-mini="true">
    <h2>Title #2</h2>
    <ul data-role="listview"></ul>
  </div>
</div>

---

当然，我遗漏了一些非常简单的东西。

好吧……下面是一个工作示例（不包括AJAX）。最大的缺点是，这只会“激发”扩展。但到那时，它已经扩大，因此目前显示出一个空白。真正需要的是“展开前”或“单击”事件，这样您就可以插入所需的内容，然后可以进行默认设置（更改图标、显示等）。我不知道该怎么提议

$（“#set div:jqmData（role='collapsable'）”）。每个（函数（）{
$（this.bind（'expand'，function（）{
if（$（this）.find（'li'）。长度<1）{
//是否在此处调用ajax以获取数据
$（this）.find（'ul'）.append（items）.listview（'refresh'）；
}
});
});
$（'#page#set li'）.live（'单击'），函数（）{
警报（“转到项目”）；
});

Hmmm…哇，我觉得自己像个白痴。我发誓我已经试过了（和可折叠的不一样），但它看起来可能有用。如果我让它完全工作，我会回来发布。有趣的是，我在当前的jqm文档集中没有看到这些信息。它可能有效，也可能无效。

$('#test h2').live('click',function() {
    // do my AJAX call here to get li's to put in correct ul (assuming none exist)
});

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" id="page">
  <div id="set" data-role="collapsible-set" data-inset="false"></div> 
</div>
$("#set div:jqmData(role='collapsible')").each(function () {
  $(this).bind('expand', function() { 
    if($(this).find('li').length < 1) {
      // do ajax call here to get data
      $(this).find('ul').append(items).listview('refresh');
    }
  });
});
$('#page #set li').live('click',function () {
  alert('Go to item');
});