Abilita la voce di elenco all'area cliccabile in jQuery Mobile

Question

Descrizione: Il seguente codice parte viene utilizzato in Android/iPhone per Roundousout carousal. Ogni LI è 100px x 100px in larghezza e altezza. E il link è in cima alla 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; 
} 

comportamento attuale: Negli articoli, Ancora si comportano solo come collegamento (salto al riferimento dato)

Comportamento previsto: Quando l'utente ha fatto clic su LI, dovrebbe passare a un dato riferimento.

risorsa relativa da 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)

soluzione vedevamo venire vicino al mio problema. ho bisogno di trovare una soluzione generica Perché non posso impostare il padding per tutti in onece o uno per uno, perché l'etichetta del link può cambiare di volta in volta.

Aggiunto e testati asfollows display:inline-block; e padding allora problema è ordinato, ma il tempo per imbottitura tempo dovrebbe essere il cambiamento.

Answer 1

Un modo semplice è quello di fare questo:

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

Si farà in modo che cliccando in qualsiasi punto della <li> restituisce lo stesso risultato ottenuto facendo clic sul contenuto <a>.

Answer 2

Credo che si potrebbe utilizzare display: block; nel css per lo stile del tag <a> per occupare l'intera <li>.

Answer 3

A. CSS Soluzione

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

B. Jquery Soluzione

$("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 
});