单击父元素后如何打开 JQM 弹出窗口

Question

我正在尝试使用以下 HTML 布局打开 jQueryMobile 弹出窗口（子 div 的）...

<div class="parent">
 <div class="child" data-role="popup">Foo</div>
</div>

<div class="parent">
 <div class="child" data-role="popup">Bar</div>
</div>

这是我用来在用户单击父 div 时打开弹出窗口的脚本。我不仅不知道为什么这个脚本不起作用，而且不知道如何打开弹出窗口。

$(".parent").click(function () {
   $(this).children(".child").popup("open");
});

Answer 1

试试这个..

<div class="parent">
 <div class="child" data-role="popup">Foo</div>
</div>

<div class="parent">
 <div class="child" data-role="popup">Bar</div>
</div>

    $('.parent').click(function() {
        $(this).find('.child').popup("open");
    });

Answer 2

问题是，当 jQM 'enhances' 弹出窗口时，它会将其从 parent DIV 中删除，并在 ui-popup-container DIV与内容 DIV 相同级别。因此，依赖通用的 class 弹出窗口名称是行不通的。

您需要以某种方式指明每个 child 属于哪个 parent。您可以使用 id 或 data-attribute 等

这是一个使用 data-attributes 的例子：

    <div class="parent" id="parent1">
        <div class="child" data-role="popup" data-parentid="parent1">
            <p>Foo</p>
        </div>
    </div>
    <div class="parent" id="parent2">
        <div class="child" data-role="popup" data-parentid="parent2">
            <p>Bar</p>
        </div>
    </div>

$('.parent').on("click", function () {        
    var id = $(this).prop("id");
    $('[data-role="popup"]').each(function(){
        var pid = $(this).jqmData("parentid");
        if (id == pid){
             $(this).popup("open");
        }
    });
});

Working DEMO

单击父元素后如何打开 JQM 弹出窗口

How to Open JQM Popup After Clicking Parent Element

jquery

jquery-mobile