Collapisble Set，jQuery Mobile，注入AJAX內容

給定一個基本的jQuery Mobile Collapisible Set，如何在切換事件觸發前獲取AJAX內容？我使用JQM創建以下：Collapisble Set，jQuery Mobile，注入AJAX內容

<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) 
});

當然我失去了一些東西超級簡單。

來源

2013-01-08 Dough Boy

http://stackoverflow.com/a/8404143/64262 – andleer

嗯...哇，我覺得自己像個白癡。我發誓我試過了（不同於可摺疊設置），但它似乎可能工作。我會回來後發佈，如果我完全工作。 –

有趣的是，我沒有在當前的jqm文檔中看到這些信息。它可能會或可能不會工作。 – andleer

好的...這是一個工作示例（減去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-09 13:13:04

Collapisble Set，jQuery Mobile，注入AJAX內容

回答

相關問題