在jQuery Mobile中启用列表项到可单击区域

Question

描述: 以下代码片段在Android/iPhone中用于Roundabout carousal.每个LI 100px x 100px的宽度和高度.并且链接是LI的顶部.

  <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;
}

当前行为:在项目中,Anchor仅表现为链接(跳转到给定引用)

预期的行为: 当用户点击LI时,它应该跳转到给定的引用.

来自stackoverflow的相对资源

如何在导航栏中创建列表项的整个区域,可单击作为链接？

使列表项可点击(HTML/CSS)

尽管解决方案接近我的问题.我需要找到通用解决方案.因为我无法在一个或一个一个地设置所有填充,因为链接标签可能会不时更改.

新增和测试asfollows display:inline-block;和padding随后的问题进行排序,而是时不时地填充应该改变.

Answer 1

一种简单的方法是这样做：

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

它将确保单击 中的任意位置会<li>产生与单击包含的 相同的结果<a>。