Include list item in click zone in jQuery Mobile

Question

Description: The following code snippet is used on Android / iPhone for Roundabout carousel. Each LI is 100px x 100px in width and height. And the link is the top of the 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; } 

Current behavior : In elements Anchor behaves only as a link (go to the specified link)

Expected behavior: When the user clicks on the LI, he must go to the specified link.

Relative resource from stackoverflow

How to create the whole area of ​​a list item in my navigation bar by clicking on the link?

Make Clickable List Item (HTML / CSS)

An eventhough solution fits my problem. I need to find a general solution. Because I can’t install the add-on for everyone in one or one after the other, because the link label may change from time to time.

Added and checked as indicated display:inline-block; and padding , then the problem is sorted, but from time to time should be changed.

Answer 1

One easy way to do this:

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

It will ensure that clicking anywhere <li> gives the same result as clicking on <a> .

Answer 2

a. CSS solution

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

B. JQuery Solution

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

Answer 3

I think you could just use display: block; in css to style the <a> tag to cover the whole <li> .