jQuery click event not working in mobile browsers

Question

the jQuery click event does not seem to be firing in mobile browsers   The HTML is as follows    lt  -- This is the main menu -- gt   lt ul class  menu  gt      lt li gt  lt a href   home   gt HOME lt  a gt  lt  li gt      lt li class  publications  gt PUBLICATIONS  amp amp  PROJECTS lt  li gt      lt li gt  lt a href   about   gt ABOUT lt  a gt  lt  li gt      lt li gt  lt a href   blog   gt BLOG lt  a gt  lt  li gt      lt li gt  lt a href   contact   gt CONTACT lt  a gt  lt  li gt    lt  ul gt      lt  -- This is the sub-menu that is to be fired on click -- gt    lt div id  filter wrapper  gt      lt ul id  portfolioFilter  gt         lt li gt  lt a href   nutrition-related   gt Nutrition related lt  a gt  lt  li gt         lt li gt  lt a href   essays   gt Essays and Nonfiction lt  a gt  lt  li gt         lt li gt  lt a href   commissioned   gt Commissioned works lt  a gt  lt  li gt         lt li gt  lt a href   plays   gt Plays and performance lt  a gt  lt  li gt         lt li gt  lt a href   new-projects   gt New Projects lt  a gt  lt  li gt       lt  ul gt     lt  div gt    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

User · Answer

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

User · Answer

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    x000D   x000D        test   on  click   function    x000D      alert  CLICKED    x000D        x000D   test     x000D    z-index 99  x000D    cursor pointer  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  test  gt CLICK ME lt  div gt  x000D   x000D   x000D    Credit https   foundation zurb com forum posts 3258-buttons-not-clickable-on-iphone

User · Answer

I had the same problem and fixed it by adding  mousedown touchstart     document  on  mousedown touchstart     className   function          your code here      inested of others

User · Answer

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

User · Answer

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

User · Answer

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   lt  -- This is the main menu -- gt   lt ul class  menu  gt      lt li gt  lt a href   home   gt HOME lt  a gt  lt  li gt      lt li gt  lt a href     class  publications  gt PUBLICATIONS  amp amp  PROJECTS lt  a gt  lt  li gt      lt li gt  lt a href   about   gt ABOUT lt  a gt  lt  li gt      lt li gt  lt a href   blog   gt BLOG lt  a gt  lt  li gt      lt li gt  lt a href   contact   gt CONTACT lt  a gt  lt  li gt    lt  ul gt    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

User · Answer

JqueryMobile  Important - Use   document  bind  pageinit    not   document  ready       document  bind  pageinit   function           publications   vclick function                filter wrapper   show

User · Answer

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    lt script src    http   u1 linnk it qc8sbw usr apps textsync upload jquery-mobile-touch value js    gt  lt  script gt    lt script gt     fn click   function listener         return this each function             var  this      this             this on    vclick     listener                 lt  script gt    source

[jquery] jQuery click event not working in mobile browsers

Examples related to jquery

Examples related to android

Examples related to ipad

Examples related to mobile