Включить элемент списка в интерактивную область в jQuery Mobile

Question

Описание: Следующий фрагмент кода используется в Android / iPhone для карусели Карусель. Каждый 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)

даже если решение близко к моей проблеме. Мне нужно найти общее решение. Потому что я не могу установить отступы для всех по одному или по одному, потому что метка ссылки может время от времени меняться.

Добавлено и проверено следующее 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

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

Answer 3

Я полагаю, что вы могли бы просто использовать display: block; в CSS для стилизации тега <a>, чтобы он занял весь <li>.