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没有在列表视图的子页面上找到弹出窗口。

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

On jsfiddle you can find my example code.

感谢tipps或建议。

Answer 1

正如您在上面的评论中所说，从jQm文档'弹出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');
}