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 に答える