jquery - Getting error when navigate to another page

Question

I'm developing a web application which contains the collapsible listview. When I click on the <li> the current page ( #biblepage) has to navigate to another page ( #chapter ) . The #biblepage page contains the collapsible listview and the #chapter page has to load the corresponding data.

Html code:

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

But when I clicked on the <li>.The #chapter page is not opening(not loading any data).

code: http://jsfiddle.net/TzX7N/2/

Thanks in Advance.

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 调用不起作用。