Question

the jQuery click event does not seem to be firing in mobile browsers.

The HTML is as follows:

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li class="publications">PUBLICATIONS &amp; PROJECTS</li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>


 <!-- This is the sub-menu that is to be fired on click -->
 <div id="filter_wrapper">
   <ul id="portfolioFilter">
      <li><a href="/nutrition-related/">Nutrition related</a></li>
      <li><a href="/essays/">Essays and Nonfiction</a></li>
      <li><a href="/commissioned/">Commissioned works</a></li>
      <li><a href="/plays/">Plays and performance</a></li>
      <li><a href="/new-projects/">New Projects</a></li>
    </ul>
  </div>

This is the jQuery script for mobile:

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
   });
 });

When I click the “publications” list item on a mobile browser nothing happens.

You can view the site here: http://www.ruthcrocker.com/

Not sure if there are jQuery mobile specific events.

Answer 1

Raminson has a nice answer if you are already (or don’t mind) using jQuery Mobile. If you want a different solution, why not just modify your code as follows:

change that LI you’re having trouble with to include an A tag and apply the class there instead of the LI

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li><a href="#" class="publications">PUBLICATIONS &amp; PROJECTS</a></li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>

And your javascript/jquery code… return false to stop bubbling.

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
       return false;
   });
 });

This should work for what you are trying to do.

Also, I noticed your site opens the other links in new tabs/windows, is that intentional?