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

How to detect that JQuery-Mobile dialog was closed

本文关键字：对话框 Mobile JQuery 何检测 检测      更新时间：2023-09-26

我有一个jQuery Mobile对话框，我从页面main.html打开，如下所示：

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

现在，当对话框关闭时，我想在我的网站main.html上获得一个回调，这样我就可以继续处理对话框中输入的信息。

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

解决方案

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

您要使用的是隐藏事件之前的页面。

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

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

您可以使用的其他事件很少，您可以在文章中找到它们，只需查找一章即可：页面事件转换顺序

证明

因为你使用了几个HTML页面，我给你做了一个由两个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被放置在页面/对话框分区中的原因。

这应该做到：

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

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

我想出了一个奇特的方法来实现我想要的：

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

说明：

  1. 创建对话框时，会引发dialogcreate事件
  2. 然后，我注册一个pagechange事件，当jquery mobile打开对话框时会抛出该事件。所以现在对话框打开了
  3. 现在，我注册了另一个单独的pagechange事件，当对话框关闭并且我回到原始位置时，该事件将被抛出

请注意，如果设置对话框在最终被取消之前触发了另一个pagechange事件，那么这将不起作用。然而，这对我来说是有效的。

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

相关文章：