jQuery Mobile导航bug(jQuery Mobile navigation bug)

我有jQuery Mobile的问题。在jQuery Mobile中转到另一个站点页面，我只需要添加页面块的id。但是在下面的代码中jQuery Mobile不起作用，当我点击列表项时。这是我的代码：

<div id="all" data-role="page" data-url="all" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 642px;"> <div data-role="header" role="banner" class="ui-header ui-bar-inherit"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back" class="ui-link ui-btn-left ui-btn ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all" role="button"> Back </a> <h1 class="ui-title" role="heading" aria-level="1">All Notes</h1> </div> <div data-role="content" class="ui-content" role="main"> <ul data-role="listview" id="all_notes" class="ui-listview"><li class="ui-first-child"> <a href="#note_afed16af-9fea-03fc-9315-5ca1f690b665" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Boris</a> </li><li> <a href="#note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Note</a> </li><li class="ui-last-child"> <a href="#note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a" class="ui-btn ui-btn-icon-right ui-icon-carat-r">eferf</a> </li></ul> </div> </div> <div id="note-detail-list"><div data-role="page" id="note_afed16af-9fea-03fc-9315-5ca1f690b665" data-url="note_afed16af-9fea-03fc-9315-5ca1f690b665"> <div data-role="header"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"> Back </a> <h1>Boris</h1> </div> <div data-role="content"> The best </div> </div><div data-role="page" id="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95" data-url="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95"> <div data-role="header"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"> Back </a> <h1>Note</h1> </div> <div data-role="content"> gjfth </div> </div><div data-role="page" id="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a" data-url="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a"> <div data-role="header"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"> Back </a> <h1>eferf</h1> </div> <div data-role="content"> freferf </div> </div></div>

DEMO

I have problem with jQuery Mobile. In jQuery Mobile to go to another page of site, I just need to add id of page block. But in the following code jQuery Mobile don't work, when i'm clicking on the list items. Here is my code:

<div id="all" data-role="page" data-url="all" tabindex="0" class="ui-page ui-page-theme-a ui-page-active" style="min-height: 642px;"> <div data-role="header" role="banner" class="ui-header ui-bar-inherit"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back" class="ui-link ui-btn-left ui-btn ui-icon-arrow-l ui-btn-icon-left ui-shadow ui-corner-all" role="button"> Back </a> <h1 class="ui-title" role="heading" aria-level="1">All Notes</h1> </div> <div data-role="content" class="ui-content" role="main"> <ul data-role="listview" id="all_notes" class="ui-listview"><li class="ui-first-child"> <a href="#note_afed16af-9fea-03fc-9315-5ca1f690b665" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Boris</a> </li><li> <a href="#note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Note</a> </li><li class="ui-last-child"> <a href="#note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a" class="ui-btn ui-btn-icon-right ui-icon-carat-r">eferf</a> </li></ul> </div> </div> <div id="note-detail-list"><div data-role="page" id="note_afed16af-9fea-03fc-9315-5ca1f690b665" data-url="note_afed16af-9fea-03fc-9315-5ca1f690b665"> <div data-role="header"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"> Back </a> <h1>Boris</h1> </div> <div data-role="content"> The best </div> </div><div data-role="page" id="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95" data-url="note_eb0cd69c-d571-7d1e-6e83-2f8d681b3f95"> <div data-role="header"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"> Back </a> <h1>Note</h1> </div> <div data-role="content"> gjfth </div> </div><div data-role="page" id="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a" data-url="note_3dd66e0d-fb7a-5a3a-ab80-6237c70d742a"> <div data-role="header"> <a href="#home" data-role="button" data-icon="arrow-l" data-rel="back"> Back </a> <h1>eferf</h1> </div> <div data-role="content"> freferf </div> </div></div>

DEMO