Question

我在jQuery mobile中有以下内容：

<script type="text/javascript">
    $("#locate_results").live("pageinit", function(event) {
        $("#venues li a").click(function(e) {
            e.preventDefault();
            // Update location
            $(".ui-dialog").each(function() { $(this).dialog("close"); });
        });
    });
</script>

<div data-role="page">
    <div data-role="header">My Form</div>
    <div data-role="content">
        ... other content ...
        <a href="#locator" data-rel="dialog">Choose a Location</a>
    </div>
</div>
<div data-role="dialog" id="locator">
    <div data-role="header">Search for a Location</div>
    <div data-role="content">
        <form action="/locate" method="post" data-rel="dialog">
            <input type="text" name="query" />
            <input type="submit" value="Search" />
        </form>
    </div>
</div>

/ locate的输出如下：

<div id="locate_results" data-role="dialog">
    <div data-role="header">Search Results</div>
    <div data-role="content">
        <ul id="venues" data-role="listview">
            <li><a href="#">Venue 1 Name</a></li>
            ... more results ...
        </ul>
    </div>
</div>

基本上，

用户点击＆＃34;添加位置＆＃34;链接。
位置搜索表单已加载到对话框中
在第二个对话框中加载的搜索结果
用户在第二个对话框中单击搜索结果。

步骤5应该是关闭对话框，将用户返回到原始页面内容。但是只有最顶层的对话框（#locate_results）关闭。我也尝试了以下内容并获得了相同的结果：

$("#locate_results").dialog("close");
$("#locator").dialog("close");

和

$(".ui-dialog").dialog("close");

我已经尝试过这些答案，没有运气：

close multiple jquery ui dialogs at once

关闭jQuery Mobile中所有打开的对话框的正确方法是什么？

jsFiddle展示了这个问题：

http://jsfiddle.net/zUuSy/

Answer 1

这似乎是一个错误。

以下是jQuery Mobile的密切方法：

// Close method goes back in history
close: function() {
    window.history.back();
}

正在发生的事情是某些浏览器连续多次调用window.history.back()时遇到问题，因此调用$(".ui-dialog").dialog("close")只会在历史记录中返回一次。但是，调用window.history.go(-2)似乎有效。

看看：http://jsfiddle.net/rummik/zUuSy/4/

Answer 2

jQuery Mobile's docs非常明确：

您也可以以编程方式调用对话框的close()方法关闭对话框，例如：$('.ui-dialog').dialog('close')。

您是否在正确的时间使用了正确的选择器？它应该工作。

以编程方式立即关闭多个jQuery Mobile对话框

2 个答案: