Enable list item to clickable area in jQuery Mobile

Question

Description: Following code piece is used in Android/iPhone for Roundabout carousal. Each LI is 100px x 100px in width and height. And link is top of the 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;
}

Current behavior: In the items, Anchor only behave as link (jump to the given reference)

Expected behavior: When user clicked on LI, it should jump to given reference.

Relative resource from stackoverflow

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 solution come to near my issue. i need to find generic solution. Because I cant set padding for all at onece or one by one, because link label may change time to time.

Added and tested asfollows display:inline-block; and padding then issue is sorted, but time to time padding should be change.

Answer 1

One simple way is to do this:

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

It will make sure that clicking anywhere in the <li> yields the same result as clicking the contained <a>.