1

给定一个基本的 jQuery Mobile Collapisible Set，如何在切换事件触发之前获取 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 调用的“切换”触发以从服务器获取内容并将其放置在正确的 ul 中。除了拦截“点击”之外，我可以弄清楚如何做所有事情。我已经尝试在单击和展开 div、h2 甚至 ul 上进行绑定。

我正在寻找类似的东西：

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

当然，我错过了一些超级简单的东西。

4

1 回答 1

0

好的...这是一个工作示例（减去 AJAX）。最大的缺点是这只会在展开时“触发”。但到那时它已经扩大，因此目前显示一个空白区域。真正需要的是“展开前”或“点击”事件，这样您就可以注入所需的内容，然后默认发生（更改图标、显示等）。不知道如何去提议...

http://jsfiddle.net/mfumm/

<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');
});
于 2013-01-09T13:13:04.360 回答