jQuery मोबाइल में क्लिक करने योग्य क्षेत्र में सूची आइटम सक्षम करें

Question

विवरण: राउंडबाउट कैरोसेल के लिए एंड्रॉइड/आईफोन में निम्नलिखित कोड टुकड़ा का उपयोग किया जाता है। चौड़ाई और ऊंचाई में प्रत्येक LI 100px x 100px है। और लिंक एलआई के शीर्ष पर है।

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

सीएसएस

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

वर्तमान व्यवहार: आइटम में, एंकर केवल कड़ी के रूप में (दिए गए संदर्भ के लिए कूद) व्यवहार करते हैं

अपेक्षित व्यवहार: जब उपयोगकर्ता एलआई पर क्लिक किया गया, इसे दिए गए संदर्भ पर कूदना चाहिए। 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)

eventhough समाधान मेरी समस्या के पास करने के लिए आते हैं। मुझे सामान्य समाधान खोजने की जरूरत है। क्योंकि मैं सभी के लिए एक या एक करके पैडिंग सेट नहीं कर सकता, क्योंकि लिंक लेबल समय-समय पर बदल सकता है।

जोड़ा गया और परीक्षण asfollows 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

मेरा मानना ​​है कि आप सीएसएस में display: block; का उपयोग <a> टैग को पूरे <li> पर लेने के लिए कर सकते हैं।

Answer 3

ए सीएसएस समाधान

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

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