jquery - jquerymobile listview アンカータグが機能しない

Question

私は次のように5つのアイテムを持つリストビュー（jquerymobile）を持って<ul> <li>います -

    <div class="ticketsBlock" data-theme="a">      
        <ul data-role="listview" data-inset="true">
 <li><a href="#custDetails" style="text-decoration:none" data-transition="slide"><p>John Smith</p><p>2 Cadeau Terr London ON N6K 4G1</p><br/><p>Issue with set-top box</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Sylvester Stallone</p><p>64 Faywood Dr Brampton ON L6Y 4L95</p><br/><p>New Connection</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Antenna Replacement</p><p>14 Grand St Brantford ON N3R 4B1</p><br/><p>New Connection</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Keanu Reaves</p><p>5617 Fourth Line Hillsburgh ON N0B 1Z0</p><br/><p>Distorted Display</p></a></li>
 <li><a href="#custDetails" style="text-decoration:none"><p>Tom Cruise</p><p>RR5 Perth ON K7H 3C7</p><br/><p>Issue with set-top box</p></a></li>
</ul>                
        </div>

それぞれの href は<li>、データの役割が「ページ」である同じ HTML ページ内の div タグを参照しています -

<div data-role="page" id="custDetails" data-theme="a">
   <button class="ui-btn-left" id="backbutton" data-icon="arrow-l" data-iconpos="left">Back</button>
    <h1>XXX</h1>
    <button class="ui-btn-right" id="exit" data-icon="back" data-iconpos="right">Exit</button>
  <div data-role="content"> Content </div>
 <div data-role="footer" data-theme="a" class="ui-footer-fixed">
    <h4>myFooter</h4>
  </div>
</div>

この html ページには、JQM の基準に従って「ページ」としてのデータ ロールを持つさまざまな div があります。div (ページとしてのデータの役割) を参照しているリスト項目をクリックすると、その div に移動しません。

しかし、はい、同じ HTML ページ内の div ではなく、別の HTML ページへのリンクを指定すると機能します。

誰でも、このアプローチのどこに問題があるか教えてください。このアプローチはまったく機能しますか？