Question

我设置了多页模板。第一页有一组指向内部页面的链接 - 但是只有一个指向同一个#template页面的链接，它会动态加载数据。另一个链接是我在页面中构建的表单。

我遇到的问题是，当您导航到其中一个链接，继续浏览页面然后使用后退按钮返回到第一页时，如果您再单击指向该表单的链接则不会导航到#page，它会转到你在其他链接中的最后一页。

希望有意义 - 也许图表会更清晰

home＆gt;产品清单＆gt;产品细节

产品详情＆gt;产品清单＆gt;回家（后退按钮）

home＆gt;联系表格

最后一步再次显示产品详细信息页面，而不是联系表单。就好像它没有清除页面一样：

我的代码（为清晰起见而截断）：

<script type="text/javascript">
    $(document).bind("mobileinit", function () {
        $.mobile.allowCrossDomainPages = true;
        $.support.cors = true;
    });

    $(document).delegate("#pageDetail", "pagecreate", function () {
        $(this).css('background', '#ECF2FE');//`this` refers to `#pageDetail`
    });

    $(document).bind("pagebeforechange", function (e, data) {           
        // We only want to handle changePage() calls where the caller is
        // asking us to load a page by URL.         

        if (typeof data.toPage === "string") {
            $.mobile.pageData = (data && data.options && data.options.pageData) ? data.options.pageData : null;
            // We are being asked to load a page by URL, but we only
            // want to handle URLs that request the data for a specific
            // category.

            var page;
            var type;
            var cat;
            if ($.mobile.pageData && $.mobile.pageData.type) {
                type = $.mobile.pageData.type;
            }

            if ($.mobile.pageData && $.mobile.pageData.cat) {
                cat = $.mobile.pageData.cat;
            }

            if ($.mobile.pageData && $.mobile.pageData.page) {
                page = $.mobile.pageData.page;
            }

            var url = $.url(data.toPage);   //  page url
            var hash = url.fsegment(1).replace(/&.*/, "");  //  nav hash for page holder            

            switch (hash) {
                case "pageList":
                    $.ajax({
                        url: "http://localhost/myapp/" + type + ".aspx?type=" + type,
                        datatype: "html",
                        success: function (data) {
                            $('.submenu').html(data);
                            $('.title').html(type);
                            $('.submenu').trigger('create');
                        }
                    });
                    break;
                case "pageDetail":
                    $('.detail').load('http://localhost/myapp/' + type + '.aspx?page=' + page + '&type=' + type + ' #contentdiv', function () {
                        $(this).trigger('create');
                    });
                    break;
                default:
                    break;
            }
        }
    });
</script>
</head>

HTML位

<body>
<div data-role="page" id="home">
    <div data-role="content">
        <a href="#pageList?type=products" data-transition="slide"><img src="images/Icon-Courses.png" alt="courses" /></a><br />
        <a href="#contactForm" data-transition="slide"><img src="images/Icon-Contact.png" alt="contact" /></a>              
    </div>
</div>

<div data-role="page" data-theme="a" id="pageList" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
    <div data-role="header" data-position="fixed">          
        <h1 class="title">Products</h1>      
    </div>
    <div data-role="content" class="submenu">   
        <!-- content gets put in here -->
    </div>

</div>

<div data-role="page" data-theme="a" id="pageDetail" data-add-back-btn="true" style="background-color:#F0F0F0 !important;">
    <div data-role="header" data-position="fixed">          
        <h1 class="title">Products</h1>      
    </div>
    <div data-role="content" class="submenu">   
        <!-- content gets put in here -->
    </div>

</div>


<div data-role="page" data-theme="a" id="contactForm" data-add-back-btn="true" class="detailpage" style="background-color:#F0F0F0 !important;">
    <div data-role="header" data-position="fixed">          
        <h1 class="title">Contact Us</h1>
    </div>
    <div data-role="content" class="detail">
        <div id="contentdiv" style="margin:10px auto;width:90%;">
        <label for="name">Your Name</label>
            <input type="text" id="name" style="width:90%;" data-mini="true" />
            <label for="email">Email Address</label>
            <input type="text" id="email" style="width:90%;" data-mini="true" />
            <label for="phone">Phone Number</label>
            <input type="text" id="phone" style="width:90%;" data-mini="true" />
            <label for="comments">Enquiry / Comments</label>
            <textarea id="comments" rows="80" style="width:90%;" data-mini="true"></textarea>
            <br />
            <input type="submit" id="submit" value="Send Enquiry Now" />                
        </div>
    </div>

</div>

</body>
</html>

我正在使用jqm.page.params.js来处理查询字符串参数。

那里有什么明显的东西吗？ #pageDetail页面的链接在#pageList。

上显示的内容中返回

不明白为什么我似乎无法清除缓存，如果您已经在其他任何地方，它无法正确导航到联系表单。如果你直接去那里就可以了。

有人放光吗？顺便说一句，这需要使用PhoneGap作为独立的

由于

Answer 1

实际上对此感觉有点暗淡，但这是因为我在多个div上有相同的类名并且正在使用它们来导入数据 - 所以当它远程加载数据时它会把它放在多个地方，覆盖形式同时......

jquerymobile - 在多页模板中导航

1 个答案: