Question

我正在使用jquery mobile和一个对话框来显示一些多个选择框。一些内容是根据选择使用Ajax动态创建的。我想在对话框关闭时（通过常规x按钮）进行Ajax调用。 html的主要部分如下：

    <a href="#queryPage" data-rel="dialog"  data-transition="slidedown"  >Filter Results</a>
    <div data-role="page" id="queryPage" data-theme="a">
    <div data-role="header" data-theme="a">
    <h1>Select Filters</h1>
    </div>
    <div data-role="content">
    <form action="" method="get" id="filterForm">
    <fieldset id ="filterFields"></fieldset>
    </form>
    </div>
    </div>

我正在通过在页面上运行代码隐藏来进行调用，如下所示： $('#queryPage').live('pagehide', function(event) { //code for ajax call });

但是，我想在对话框关闭时进行调用，因为某些选择列表很大，并且即使对话框尚未关闭，它们也会创建一个隐藏queryPage的新页面。我试过了：

    $('#queryPage').bind('dialogclose', function(event) {
         alert('closed');
     });

并尝试了

    $('#queryPage').dialog({close:function(event, ui){
        alert("closed");
    }});

这些我已经放入了一个在页面加载时调用的函数，但是当关闭对话框时不会显示警报。任何帮助将不胜感激。

Answer 1

对话框没有特定事件，因为它们只是显示为对话框的页面。试试pagehide活动。

$("#MyDialog").bind("pagehide",function(){
  alert("Dialog closed");
});

此外，示例代码的第一行有一个<div data-role="page">之外的链接，不应该这样做。

Answer 2

Pagehide可以这样委托：

$(document).delegate("#MyDialog", "pagehide", function() {
  alert("Dialog closed");
});

您还可以访问调用页面的屏幕元素。

Answer 3

Andleer使用jquery分享了关闭对话框的相应事件。但是，我们也可以这样编码。

    $(document).on("pagehide","#Dialog",function(){
        console.log('Dialog has closed.');
    });

在jquery移动中的对话关闭事件

3 个答案: