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

Question

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

这是单个 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 的弹出功能不可能实现？

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

感谢您的提示或建议。

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');
}