导航到另一页时出错

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();
         }
     }
 });

这里有一个演示，请注意Ajax调用不起作用。