jQueryのモバイルナビゲーションバー結合結果

Question

jQueryのモバイルを使用して1.0bの

<div class="navSubBars" id="cat0Nav" data-role="navbar" style=" padding-top: 2px;"> 
    <ul> 
    <li>item1 
    <li>item2 
    <li>item3 
    <li>item4 
</ul> 
</div> 

$('.navSubBars>ul>li>a').live('vclick',function() { 
    var subMenuItem = $(this).text(); 
    alert(subMenuItem); 
}); 

まずクリックイベントは、アラートを発生させます。ページ上の他の項目（アンカー）をクリックすると、直ちに別のクリックイベントが発生します。後続のクリックは間欠的に正しく発火し、一部は警告を発しません。非常にランダム。

動的コンテンツを同じページのdivに読み込む場合は、これが必要です。

バインドを解除し、伝播を停止し、偽を返し、さまざまなセレクタをすべて成功させようとしました。

私は、回避策、修正、またはより良いアプローチを探しています。ありがとう。

Answer 1

あなたliタグは有効なHTMLではありません。

ライブ例：

• http://jsfiddle.net/qedNv/

HTML：

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content">   
     <div class="navSubBars" id="cat0Nav" data-role="navbar" style=" padding-top: 2px;"> 
      <ul> 
       <li class="click-li">item1</li> 
       <li class="click-li">item2</li> 
       <li class="click-li">item3</li> 
       <li class="click-li">item4</li> 
      </ul> 
     </div> 
    </div> 
</div> 

JS（各リチウムにアクセスするためのクラス属性を追加する）：

$('.click-li').live('vclick', function() { 
    var subMenuItem = $(this).text(); 
    alert('Sub Menu Item: '+subMenuItem); 
});