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

Question

我正在尝试使用以下HTML布局打开jQueryMobile Popup（子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＆＃39;增强＆＃39;弹出窗口，它将它从父DIV中删除，并创建一个与内容DIV相同级别的.ui-popup-container DIV。因为这依赖于弹出窗口的通用类名而无法工作。

您需要以某种方式指出每个孩子所属的父母。您可以使用id或数据属性等

以下是使用数据属性的示例：

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

  

正在使用 DEMO