Question

以对话框样式打开页面，默认情况下会添加关闭按钮。有没有办法捕获对话框页面的关闭按钮的单击事件。我喜欢在对话框页面关闭之前调用回调。

<div data-role="page" id="page1">

    <div data-role="header" data-position="fixed" data-tap-toggle="true" >
        <h1>Page 1</h1>
    </div>

    <div role="main" class="ui-content">
        This is Page1.

        <a href="#" class="ui-btn ui-corner-all" onclick="showDialog();">Show Dialog</a>

    </div>

    <script>
        function showDialog() {
            $(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );

        }
   </script>

</div>


<div data-role="page" id="page2">

    <div data-role="header" data-position="fixed" data-tap-toggle="true" >
        <h1>Dialog</h1>
    </div>

    <div role="main" class="ui-content">

        This is Dialog
    </div>
</div>

可以使用pagecontainerhide事件。但它对ajax不起作用。如果在DOM中动态创建对话框页面，则不会为隐藏事件定义ui.prevPage。

感谢您的帮助。

Answer 1

关闭按钮是一个标题元素的锚标记（<a></a>），在具有类ui-dialog-contains的对话框容器中具有类.ui-header。所以你可以使用jQuery选择器：

".ui-dialog-contain .ui-header a"

当您处理click事件时，您可以通过使用ui-dialog类找到 closest() DOM元素来获取父页面：

$(document).on("pagecreate", "#page1", function(){

    $(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
        alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));       
    });

});

<强> DEMO

jquery mobile：向页面对话框关闭按钮添加事件处理程序

1 个答案: