Close button on dialog returns to the wrong page

2019-07-29 06:45发布

问题:

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>

Update

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/

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.

Update 2

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 -->

See here.

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

回答1:

add an id to your other page

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

then it will work, see jsfiddle



回答2:

coming back to another solution, because you mentioned: is there a way to remove the close button? Yes, just add this style, see also this answer...

 <style>
   .ui-dialog .ui-header a[data-icon=delete] {
     display: none;
   }
 </style>

and another jsfiddle to demonstrate that