解决方案

Question

我有一个jQuery-Mobile dialog我可以从我的页面main.html打开，如下所示：

$.mobile.changePage("settings.html", {
    role: "dialog",
    transiation: "pop",
    changeHash: true
});

现在，我希望在对话框关闭时在我的网站main.html上收到回调，以便我可以继续处理对话框中输入的信息。

更新：提到我应该在我的初始位置main.html

收到回电

Answer 1

解决方案

Dialog只是经典jQuery Mobile页面的另一个版本，因此也可以使用页面事件。

您要使用的是 pagebeforehide 事件。

工作示例：http://jsfiddle.net/Gajotres/cbc5q/

$(document).on('pagebeforehide', '#second', function(){       
    alert('Close Dialog');
});

您使用的其他活动很少，您可以在 ARTICLE 中找到它们，只需查找一个名为：页面事件转换顺序 <的章节/ p>

证明

因为您使用了几个HTML页面，所以我为您制作了一个由2个HTML文件组成的工作示例：

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   
    <script>
        $(document).on('pagebeforeshow', '#index',function (e, data) {
            var prevPage = data.prevPage.attr('id');
            if(prevPage === 'second'){
                alert('sdfs');
            }
        }); 
    </script>       
</head>
<body>
    <div data-role="page" id="index">       
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <a href="dialog.html" data-role="button">Open dialog</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

dialog.html

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>    
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>   

</head>
<body>
    <div data-role="dialog" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
        </div>

        <div data-role="content">
            <a href="index.html" data-role="button">close Dialog</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

首先注意，在dialog.html中，javascript被放置在页面/对话框div中。这是因为jQuery Mobile在打开其他页面时会删除HEAD内容+其他所有内容。这就是javascript放在页面/对话框div中的原因。

这应该这样做：

$(document).on('pagebeforeshow', '#index',function (e, data) {
    var prevPage = data.prevPage.attr('id');
    if(prevPage === 'second'){
        alert('sdfs');
    }
});

此代码将在初始页面上触发，就在它显示之前。如果上一页是对话框，则执行操作。

Answer 2

我找到了一种实现我想要的奇特方式：

$(document).on( "dialogcreate", function( event, ui ) {
    $(document).one('pagechange', function (e, f) {
        $(document).one('pagechange', function (e, f) {
           console.log('Settings closed');
        });
    });
});

说明：

创建对话框时，抛出dialogcreate事件
然后我注册了一个 pagechange事件，当jquery-mobile打开一个对话框时会抛出该事件。所以现在对话框已打开
现在我注册了另一个单pagechange个事件，当对话框关闭并返回原始位置时，该事件将被抛出。

请注意，如果设置对话框在最终被解除之前触发另一个pagechange事件，则此操作无效。但是，这适用于我的情况。

我希望有一个更清洁的方法。我想知道为什么没有dialogclose事件这样的事情。

如何检测JQuery-Mobile对话框已关闭

2 个答案:

解决方案

证明

的index.html

dialog.html