jQuery Mobile - ネストされたリストビューのポップアップ

Question

子を持たない要素に編集ボタンを付けることができるリストビューを作成しようとしています。ユーザーがこのボタンをクリックすると、ポップアップメニューが表示されます。ここで

焦がすJQMページ内のコードです。

<div data-role="content"> 
<ul data-role="listview"> 
    <li> 
     <h3>Colors</h3> 
     <ul> 
      <li>Blue 
       <p class="edit"> 
        <a href="#" onclick="openEditMenu()" data-role="button" 
         data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a> 
       </p> 
      </li> 
      <li>Orange</li> 
      <li>Purple</li> 
     </ul> 
    </li> 
    <li><h3>Item</h3> 
     <p class="edit"> 
      <a href="#" onclick="openEditMenu()" data-role="button" 
       data-icon="gear" data-inline="true" data-iconpos="notext">Edit</a> 
     </p></li> 
    </ul> 
</div> 
<div data-role="popup" id="popupMenu"> 
    <ul data-role="listview" data-inset="true" > 
      <li data-role="divider" data-theme="a">Edit Element</li> 
      <li><a href="#">Edit</a></li> 
      ... 
    </ul> 
</div> 
<script> 
    function openEditMenu() { 
     $('#popupMenu').popup('open'); 
    } 
</script> 

これは、期待通りに機能します。ネストされたリストの2番目のレベルに移動すると、ポップアップは表示されません。

JQMのポップアップを同じページに配置する必要があることがわかりました。 JQMはlistviewのサブページでポップアップを見つけられないようです。

JQM 1.2のポップアップ機能では、誰かがこのような解決策を成功裏に実現したのですか？ティップスや提案のための

On jsfiddle you can find my example code.

感謝。

Answer 1

上記のコメントで述べたように、jQmのドキュメント 'から、ポップアップdivはリンクと同じページ内にネストする必要があります。 '。

ポップアップを複製して他のページに添付してみてください。その後、あなたはそれを再初期化して開きます。あなたがHTMLで（幅と高さを与えられた）、それが有効になっているポップアップdiv要素を検査した場合

var nestedLiPage = $(".ui-page-active"); 
$('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open'); 

Answer 2

[解決]

http://jsfiddle.net/F9awk/

function openEditMenu() { 
    var nestedLiPage = $(".ui-page-active"); 
    $('#popupMenu').clone().appendTo(nestedLiPage).popup().popup('open'); 
}