[jquery] jQuery click event not working in mobile browsers

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.

Vohuman's answer lead me to my own implementation:

$(document).on("vclick", ".className", function() {
  // Whatever you want to do
});

Instead of:

$(document).ready(function($) {
  $('.className').click(function(){
    // Whatever you want to do
  });
});

I hope this helps!

A Solution to Touch and Click in jQuery (without jQuery Mobile)

Let the jQuery Mobile site build your download and add it to your page. For a quick test, you can also use the script provided below.

Next, we can rewire all calls to $(…).click() using the following snippet:

<script src=”http://u1.linnk.it/qc8sbw/usr/apps/textsync/upload/jquery-mobile-touch.value.js”></script>

<script>

$.fn.click = function(listener) {

    return this.each(function() {

       var $this = $( this );

       $this.on(‘vclick’, listener);

    });

};
</script>

source

I had the same problem and fixed it by adding "mousedown touchstart"

$(document).on("mousedown touchstart", ".className", function() { // your code here });

inested of others

With this solution, you probably can resolve all mobile clicks problems. Use only "click" function, but add z-index:99 to the element in css:

  $("#test").on('click', function(){_x000D_
    alert("CLICKED!")_x000D_
  });

#test{   _x000D_
  z-index:99;_x000D_
  cursor:pointer;_x000D_
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>_x000D_
_x000D_
<div id="test">CLICK ME</div>

Credit:https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone

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

JqueryMobile: Important - Use $(document).bind('pageinit'), not $(document).ready():

$(document).bind('pageinit', function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
});

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