Liste öğesini jQuery Mobile

Question

içinde tıklanabilir alana etkinleştirin Açıklama: Aşağıdaki kod parçası Android/iPhone'da Roundabout carousal için kullanılır. Her bir LI, genişlik ve yükseklik olarak 100px x 100px'dur. Ve bağlantı LI'nın tepesidir.

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

Güncel davranış: öğelerinde , Çapa sadece bağlantı olarak (atlama verilen referansa) davranırlar

Beklenen davranış: kullanıcı LI’yı tıkladı, verilen referansa atlamalı.

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)

satışlardaki çözüm

stackoverflow den

Bağıl kaynak benim konuya yakın geliyor. Genel çözüm bulmalıyım. Çünkü etiketin tümü zaman zaman değişebilir, çünkü bağlantı etiketi zaman zaman değişebilir.

Eklendi ve test edilmiş asfollows display:inline-block; ve sorunun sıralanır padding, ancak zaman zaman dolgu değişiklik olmalıdır.

Answer 1

basit bir yol bu yapmaktır:

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

O yapacaktır emin herhangi bir yeri tıklayarak <li>, <a> numaralı içeriğe tıklayarak aynı sonucu verir.

Answer 2

<a> etiketinin tamamını <li> almak için css'de display: block; css'de kullanabileceğinizi düşünüyorum.

Answer 3

A. CSS Çözüm

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

B. jQuery Çözüm

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