jquery - フォーカス順序の設定 (Webworks)

Question

アプリのフォーカス順が間違っているようです。アプリは、Web サービスからレコードのリストを取得し、div の for ループを使用して表示することになっています。

例：

function loadListing()
{
  var listing = "";
  var value = new Array('One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 
  'Nine', 'Ten');

  listing += '<div style="background-color: purple; color: yellow; padding: 10px;  
  margin-bottom: 10px;">I\'m some big listing</div>';

  listing += '<div id="container">';

  for(var h = 0; h < 10; h++)
  {
    listing += '<div class="innerContainer" x-blackberry-focusable="true" 
    onmouseover="bigHover(this)" onmouseout="dontHover(this)">';
    listing += '<div style="font-size: 20px; font-weight: bold;">'+value[h]+'</div>'; 
    listing += '</div>';
  }
  listing += '</div>';

  listing += '<div style="background-color: purple; color: yellow; padding: 10px;   
  margin-top: 20px;margin-bottom: 10px;">I\'m self-generate listing</div>';
  for(var i = 1; i <= 10; i++)
  {
    listing += '<div><ul class="ulClass">';
    listing += '<li><span class="pretty" x-blackberry-focusable="true"   
    onmouseover="hoverMe(this)" onmouseout="dontHover(this)">' +i+' </span></li>';
    listing += '</ul></div>';
  }
 $('#mainBody').html(listing);
}

CSS:

.ulClass{ list-style: none; margin: 0; padding: 0; }

.ulClass li{ display: inline; float: left; }

.pretty{ font-size: 20px; color: orange; border: 1px solid orange; padding: 3px; 
         margin: 3px; width: 5px; }

ユーザーがリストのスクロールを完了すると、ページング (ul class="paging") 上の次のフォーカス可能な要素は、1 ページではなく 10 ページになります。

フィドル

誰でも助けてもらえますか？