jQuery click event not working in mobile browsers

I know this is a resolved old topic, but I just answered a similar question, and though my answer could help someone else as it covers other solution options:

Click events work a little differently on touch enabled devices. There is no mouse, so technically there is no click.According to this article - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - due to memory limitations, click events are only emulated and dispatched from anchor and input elements. Any other element could use touch events, or have click events manually initialized by adding a handler to the raw html element, for example, to force click events on list items:

$('li').each(function(){    this.onclick = function() {}});

Now click will be triggered by li, therefore can be listened by jQuery.

On your case, you could just change the listener to the anchor element as very well put by @mason81, or use a touch event on the li:

$('.menu').on('touchstart', '.publications', function(){    $('#filter_wrapper').show();});

Here is a fiddle with a few experiments - http://jsbin.com/ukalah/9/edit

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

You can use jQuery Mobile vclick event:

Normalized event for handling touchend or mouse click events on touch devices.

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