鏈接在列表視圖分裂無法點擊

Question

我有一個分裂列表視圖類似下面（從JQM示例）：

<ul data-role="listview" data-split-icon="gear" data-split-theme="d"> 
     <li><a href="index.html"> 
       <img src="images/album-bb.jpg" /> 
       <h3>Broken Bells</h3> 
       <p>Broken Bells</p> 
      </a> 
      <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album 
      </a> 
     </li> 
     <li> 
      <a id="secondListItem"> 
       <img src="images/album-hc.jpg" /> 
       <h3>Warning</h3> 
       <p>Hot Chip</p>  
      </a> 
      <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album 
      </a> 
     </li>   
    </ul> 

這導致EEN列表視圖與齒輪按鈕的所有項目的右側。 示例（請參閱第一個listitem）使用href鏈接到另一個頁面。這按預期工作。整個按鈕是可點擊的。

但我想要的是在單擊右側按鈕後運行JavaScript函數。 我已經附上函數clickhandler如下（見第二列表項）：

$('#secondListItem').click(function(){ 
    console.log('clicked!!'); 
}); 

現在，當我在按鈕上沒有任何的圖標點擊情況，點擊按鈕的其餘部分工作正常。 問題在於JQM的補充，使它更漂亮。我試圖把clickhandlers放在標籤裏面的跨度，但似乎沒有任何工作。

那麼，我該如何添加一個ClickHandler到正確的按鈕？ （在李的第二一）

Answer 1

你可以試試：

$('#secondListItem').click(function(e){ 
    e.preventDefault();  // to prevent default browser load activity 
    console.log('clicked!!'); 
}); 

OR

$('ul').on('click', '#secondListItem', function(e){ 
    e.preventDefault(); 
    console.log('clicked!!'); 
});