Bật mục danh sách để khu vực có thể nhấp trong jQuery Mobile

Question

Mô tả: Đoạn mã sau được sử dụng trong Android/iPhone cho Roundabout carousal. Mỗi LI có chiều rộng và chiều cao là 100px x 100px. Và liên kết là đầu của 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; 
} 

hành vi hiện tại: Trong mục này, Neo chỉ cư xử như liên kết (nhảy tới các tài liệu tham khảo cho)

hành vi dự kiến: Khi người dùng nhấp vào LI, nó sẽ chuyển đến tham chiếu nhất định.

tài nguyên tương đối từ 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)

giải pháp dù cho đến gần vấn đề của tôi. tôi cần tìm giải pháp chung. Bởi vì tôi không thể đặt padding cho tất cả tại onece hoặc từng người một, bởi vì nhãn liên kết có thể thay đổi thời gian.

Đã thêm và thử nghiệm asfollows display:inline-block; và padding sau đó vấn đề được sắp xếp, nhưng thời gian để đệm phải thay đổi.

Answer 1

Một cách đơn giản là để làm điều này:

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

Nó sẽ đảm bảo rằng cách nhấn vào bất cứ nơi nào trong <li> mang lại kết quả tương tự khi nhấp vào có chứa <a>.

Answer 2

Tôi tin rằng bạn chỉ có thể sử dụng display: block; trong css để tạo kiểu cho thẻ <a> để chiếm toàn bộ <li>.

Answer 3

Giải pháp A. CSS

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

B. Jquery Giải pháp

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