jQuery Mobile - wyskakujące okienko w widoku listy zagnieżdżonej

Question

Próbuję utworzyć widok listy, w którym elementy bez dzieci mogą mieć przycisk edycji. Kiedy użytkownik kliknie na ten przycisk, powinno pojawić się menu podręczne.

Oto kod wewnątrz strony małpa 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> 

Na pierwszym poziomie działa to tak, jak powinno. Jeśli przejdziesz do drugiego poziomu zagnieżdżonej listy, okno podręczne nie zostanie wyświetlone.

Widziałem, że wyskakujące okienka w JQM należy umieścić na tej samej stronie. Wygląda na to, że JQM nie znajduje wyskakującego okienka na podstronach listy.

Czy ktoś z powodzeniem zrealizował takie rozwiązanie, czy nie jest to możliwe z funkcją popup w JQM 1.2?

On jsfiddle you can find my example code.

Dzięki za TIPPS lub sugestie.

Answer 1

Jak już wspomniano w komentarzach powyżej, z dokumentacji jQm "Wyskakujący element div musi być zagnieżdżony na tej samej stronie co łącze. ".

Możesz spróbować klonować wyskakujące okienko i dołączać je do drugiej strony. Następnie ponownie ją zainicjalizujesz i otworzysz. Można spróbować czegoś takiego:

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

Answer 2

[Solved]

http://jsfiddle.net/F9awk/

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