jQuery Mobile - 嵌套列表视图中的弹出窗口

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的弹出功能无法实现？

在jsfiddle上你可以找到我的示例代码.

谢谢tipps或建议.

Answer 1

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

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

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