链接在列表视图分裂无法点击

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!!'); 
});