jquery-mobile - jQuery Mobile - 嵌套 ListView 中的弹出窗口

Question

我尝试创建一个 ListView ，其中没有子元素的元素可以有一个编辑按钮。当用户单击此按钮时，应出现一个弹出菜单。



这是单个 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>

在第一级，这按预期工作。如果您导航到嵌套列表的第二级，则不会显示弹出窗口。

我看到 JQM 中的弹出窗口必须放在同一页面上。似乎JQM在listview的子页面上没有找到弹出窗口。

是否有人成功实现了这样的解决方案，或者 JQM 1.2 的弹出功能无法实现？

On jsfiddle you can find my example code.

感谢您的提示或建议。

Answer 1

正如您在上面的评论中所说，来自 jQm 文档“弹出 div 必须嵌套在与链接相同的页面中。”。

您可以尝试克隆弹出窗口并将其附加到其他页面。然后你重新初始化并打开它。
你可以尝试这样的事情:

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