jQuery mobile 从弹出窗口打开弹出窗口答案

【问题标题】：jQuery mobile open popup from popupjQuery mobile 从弹出窗口打开弹出窗口
【发布时间】：2013-08-25 13:49:38
【问题描述】：

我在 PhoneGap 上使用 jQuery mobile 1.9.1 min。
我有一个列表，其中每个点击项都会打开一个操作弹出窗口：

function showActions(index){
    selectedIndex = index; 
    $("#actionPopup").popup("open", {positionTo: '#list li:nth-child('+ index +')'});
}

<div data-role="popup" id="actionPopup" data-overlay-theme="a">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <ul data-role="listview">
                <li data-role="divider">Actions</li>
                <li data-icon="false" onclick="showDetails();">action1</li>
                <li data-icon="false">action2</li>
                <li data-icon="false">action3</li>
                <li data-icon="false">action4</li>
            </ul>
        </div>

当我使用 showDetails() 按下 action1 时，它们会调用方法，但未显示第二个弹出窗口。

function showDetails(){
    console.log("showDetails");
    $("#infoPopup").popup("open");
}

<div data-role="popup" id="infoPopup">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <div id="infoContent">
                <table>
                    <tr id="eventcode">
                        <td>test1:</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr id="eventtype">
                        <td>test2:</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
        </div>

我能做什么？

【问题讨论】：

标签： jquery-mobile cordova popup

【解决方案1】：

我的解决方案

$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
    var afterClose = function() {
        destinationElement.popup("open");
        sourceElement.off("popupafterclose", afterClose);

        if (onswitched && typeof onswitched === "function"){
            onswitched();
        }
    };

    sourceElement.on("popupafterclose", afterClose);
    sourceElement.popup("close");
};

【讨论】：

【解决方案2】：

我使用这个简单的函数来解决问题：

function myPopup(myPage) {
    history.back();
    setTimeout(function () {
        $(myPage).popup('open');
    }, 100);
}

【讨论】：

【解决方案3】：

@Rakoo 有一个很好的答案。这是一个更精简的版本：

$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
    sourceElement.one("popupafterclose", function() {
        destinationElement.popup("open")
        !onswitched || typeof onswitched !== "function" || onswitched()
    }).popup("close")
};

如果您不需要 onswitched 功能并且不将其添加到 $.mobile，它可以这么简短：

$('#popup1').one("popupafterclose", function(){$('#popup2').popup("open")}).popup("close")

【讨论】：

【解决方案4】：

似乎链接弹出窗口不是possible。

解决办法：

$( document ).on( "pageinit", function() {
    $( '.popupParent' ).on({
        popupafterclose: function() {
            setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
        }
    });
});

【讨论】：

【解决方案5】：

我使用此代码从弹出窗口切换弹出窗口，它工作正常。

function switchpop()
{
    $( '#popupMenu' ).popup( 'close' );  
    $( "#popupMenu" ).bind({popupafterclose: function(event, ui) 
            { 
                $( "#notes" ).popup( "open" );
            }
            });                
}

【讨论】：

【解决方案6】：

经过四个小时的努力，我将问题简化为：

这是在第一个弹出窗口上的按钮单击功能

    $('#popupCall').popup('close');

    window.setTimeout(function () { $('#popupContact').popup('open') }, 50);

【讨论】：