jQuery Mobile - Popup in nested list view

Question

I try to create a listview where elements with no children can have an edit button. When the user clicks to this button a popup menu should appear.

Here is the code inside a singe JQM page.

<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>

On the first level this works like expected. If you navigate to the second level of the nested list, the popup is not shown.

I saw that popups in JQM has to be placed on the same page. It seems that JQM does not find the popup on the subpages of the listview.

Has somebody realized successfully such a solution or it is not possible with the popup feature of JQM 1.2?

On jsfiddle you can find my example code.

Thanks for tipps or suggestions.

Answer 1

As you said in the comments above, from the jQm documentation 'A popup div has to be nested inside the same page as the link.'.

What you could try is clone the popup and attach it to the other page. Then you have re-initialize and open it. You could try something like:

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