启用列表项到jQuery Mobile中的可点击区域

Question

描述： 下面的代码片段用于Android/iPhone for Roundabout carousal。每个LI在宽度和高度上都是100px x 100px。链接是李的顶部。

<div data-role="content" data-theme="aa"> 
    <ul class="roundabout-holder"> 
     <li class="roundabout-moveable-item"> 
      <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
     <li class="roundabout-moveable-item"> 
      <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
     <li class="roundabout-moveable-item"> 
      <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
     <li class="roundabout-moveable-item"> 
      <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
     <li class="roundabout-moveable-item"> 
      <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
    </ul> 
    </div> 

CSS

.roundabout-holder { 
    list-style: none; 
    width: 75%; 
    height: 10em; 
    margin: 1em auto; 
} 

.roundabout-moveable-item { 
    height: 100px; 
    width: 100px; 
    border: 1px dotted #999; 
    background-color: #f3f3f3; 
    font-size: 2em; 
    cursor: pointer; 
} 

当前行为： 在项目，锚只表现为链接（跳转到给定的参考）

预期的行为： 当用户点击LI，它应该跳转到给定的参考。从计算器

相对资源

How do I make the whole area of a list item in my navigation bar, clickable as a link?

Make A List Item Clickable (HTML/CSS)

eventhough解决方案来接近我的问题。我需要找到通用的解决方案。因为我不能一个一个地或一个地为所有人设置填充，因为链接标签可能会不时变化。

添加和测试asfollows display:inline-block;和padding然后问题进行排序，而是时不时地填充应该改变。

Answer 1

一个简单的方法是这样：

$('li.roundabout-moveable-item').click(function(e) { 
    e.preventDefault(); 
    $(this).find('a').click(); 
    return false; 
}); 

这将确保点击任何地方的<li>产生与点击包含的<a>相同的结果。

Answer 2

我相信你可以只使用display: block;在CSS样式的<a>标签占据整个<li>。

Answer 3

A. CSS解决方案

li.roundabout-moveable-item a{ 
    display:block; 
    width:100px; 
    height:100px; 
} 

B. jQuery的解决方案

$("li.roundabout-moveable-item").click(function(){ 
    $('a', $(this)).trigger('click'); 
}); 

$("li.roundabout-moveable-item a").click(function(event){ 
    event.stopPropagation(); 
    // To prevent li-click being trigged 
});