html - jQuery Mobile 导航错误

Question

我对 jQuery Mobile 有疑问。在 jQuery Mobile 中转到站点的另一个页面，我只需要添加页面 block 的 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

Answer 1

标记中存在问题，因此 jquery mobile 无法正确呈现:

<div id="note-detail-list">

超出所有页面。

如果你删除它一切正常。尝试:

http://jsfiddle.net/7M5c5/3/