对话框上的关闭按钮返回到错误的页面 [英] Close button on dialog returns to the wrong page

问题描述

这是一个非常简单的小提琴：

Here's a very simple fiddle:

http：// jsfiddle.net/mmSKj/

如果单击标题栏中的预设按钮，它将打开一个对话框。如果您点击对话框上的关闭按钮，而不是返回到页面，它将转到页面上的最后一页（不包括对话框本身）（内容这是另一页）。怎么来的？有没有办法修复自动插入的后退按钮，使其自身正常运行（如对话框中包含的主页按钮），否则，可以删除关闭按钮。

If you click the "presets" button in the header bar, it opens a dialog. If you click the "close" button on the dialog, instead of going back to the page it came from, it goes to the last page (excluding the dialog itself) on the page (the one with the content This is another page). How come? Is there a way to fix the automatically inserted back button so it behaves itself properly (like the "home" button I included in the dialog) or, failing that, is there a way to remove the close button.

<div data-role="page" id="index">
    <header data-role="header">
    <h1>Index</h1>
    <a href="#presets" data-icon="star" class="ui-btn-right" data-transition="pop" data-rel="dialog">Presets</a>
    </header>
    <article data-role="content">
        <div>This is the main page</div>
    </article>
</div>
<div data-role="page">
    This is another page
</div>
<div data-role="page" id="presets">
    <header data-role="header">
        <h1>Presets</h1>
        <a href="#index" data-icon="home" data-iconpos="notext"></a>
    </header>
    <div data-role="content">
        This is a dialog!
    </div>
</div>

更新

正如Taifun指出的那样，问题是页面上缺少一个id。添加id修复了我的第一个小提琴。然而，我的真实情况有点复杂，如这个小提琴所示：

As Taifun pointed out, the problem is the lack of an id on the page. Adding an id fixes my first fiddle. However, my real situation is a little more complicated, as shown in this fiddle:

http://jsfiddle.net/mmSKj/2/

这里我实际上是使用knockout动态创建页面，并且我指定通过数据绑定到这些页面的ID，但是似乎这些id由于某种原因不被jQuery Mobile识别。如果您使用Firebug查看，可以看到ids已被正确地添加到页面的属性中，但是当您关闭对话框时，最终会在第3页而不是原始页面。

Here I am actually creating pages dynamically using knockout, and I assign IDs to those pages via data binding, but, it seems, those ids are not recognized by jQuery Mobile for some reason. If you look with Firebug, you can see that the ids are correctly added to the attributes of the pages, but when you close the dialog, you end up on page 3 rather than the original page.

更新2

简单的修复，我刚刚添加了一个虚拟的id到html的一点，淘汰将要使用作为模板：

Simple fix, I just added a dummy id to the bit of html that knockout is going to use as a template:

<!-- ko foreach: pages -->
<div data-role="page" data-bind="attr: {id: name}" id="dummy">
    This is <span data-bind="text:name"></span>
</div>
<!-- /ko -->

请参阅这里。

虚拟代码被淘汰代替，所以链接到该页面正常工作，jQuery手机似乎很开心！ p>

The dummy id is replaced by knockout, so links to that page work correctly and jQuery mobile seems to be happy!

推荐答案

将 id 添加到您的其他页面

<div data-role="page" id="anotherpage">
    This is another page
</div>

然后它将工作，请参阅 jsfiddle

then it will work, see jsfiddle

这篇关于对话框上的关闭按钮返回到错误的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！