Question

我正在开发一个包含可折叠列表视图的Web应用程序。当我点击<li>时，当前页面（#biblepage）必须导航到另一个页面（#chapter）。 #biblepage页面包含可折叠列表视图，#chapter页面必须加载相应的数据。

Html代码：

<!-- Home Page -->
<div data-role="page" id="biblepage" data-transition="flip">
    <div data-role="header" data-position="fixed">
    </div>

    <div data-role="content">

         <div id="collapse_list"></div>
    </div>
</div>

<!-- Chapter Page -->
    <div data-role="page" id="chapter">
        <div data-role="header" data-position="fixed" data-theme="b">
                <h1></h1>
        </div>

        <div data-role="content"></div>

</div>

但是当我点击<li>时，#chapter页面未打开（未加载任何数据）。

代码：http://jsfiddle.net/TzX7N/2/

先谢谢。

Answer 1

你的pagebeforechange听众错了。首先，toPage不在函数的第一个参数（事件本身）中，但在第二个参数和第二个参数中，您的正则表达式再次测试$chapter而不是#chapter 。它应该是这样的：

 // Listen for pagebeforechange event
 $(document).bind("pagebeforechange", function (event, data) {
     // only handle changePage() when loading a page by URL.
     if (typeof data.toPage === "string") {
         // Handle URLs that requests chapter page
         var url = $.mobile.path.parseUrl(data.toPage),
             regex = /^#chapter/;
         if (url.hash.search(regex) !== -1) {
             showChapter(url, data.options);
             // tell changePage() we've handled this 
             //e.preventDefault();
         }
     }
 });

演示here，注意Ajax调用无效。

导航到另一个页面时出错

1 个答案: