Habilitar elemento de la lista que se puede hacer clic en el área de jQuery Mobile

Question

Descripción: siguiente fragmento de código se utiliza en Android/iPhone para Roundabout carousal. Cada LI es 100px x 100px en ancho y alto. Y el enlace es la parte superior de la 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; 
} 

comportamiento actual: En los artículos, anclaje sólo se comportan como enlace (salto a la referencia dada)

comportamiento esperado: Cuando el usuario hizo clic en LI, debería saltar a la referencia dada.

recurso relativa de 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)

solución eventhough vienen a cerca de mi problema. Necesito encontrar una solución genérica. Porque no puedo establecer el relleno para todos en onece o uno por uno, porque la etiqueta de enlace puede cambiar de vez en cuando.

Agregado y probado como display:inline-block; y padding entonces el problema está ordenado, pero el relleno de vez en cuando debe cambiarse.

Answer 1

Una forma sencilla es hacer esto:

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

Se asegurará de que al hacer clic en cualquier lugar del <li> produce el mismo resultado que al hacer clic en <a>.

Answer 2

Creo que podría simplemente usar display: block; en el CSS para diseñar la etiqueta <a> para ocupar toda la <li>.

Answer 3

Solución A. CSS

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

B. Solución 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 
});