Jquery click not working with ipad

Question

we have a web application which is using Jquery blockUI to open a pop up and do some action  All of this works fine on Safari  and IE 8  problem is with Ipad  none of the actions in pop up are responding  it just stays on that page  even close doesnot work  do we need to add anything else  here is the code that opens a page and click event for close    lt script gt    document  ready function         ajaxSetup               cache false                     sendInviteDiv   load  invite htm action view amp pid   pid                 blockUI   message      sendInviteDiv                    centerY  0                      css                    top      window  height   - 550   2    px                           left     window  width   - 870   2    px                           width   870px                                                  var ua   navigator userAgent                var event    ua match  iPad i      touchstart     click                 alert ua                    closeInvite   click   unblockUI            inviteBtn   click function       script to load           setPositionDetails    formName    inviteBtn                           lt  script gt    appreciate pointers   javascript is turned on and popups are allowed in Ipad Safari settings

User · Answer

Thanks to the previous commenters I found all the following worked for me:

Either adding an onclick stub to the element

onclick="void(0);"

or user a cursor pointer style

style="cursor:pointer;"

or as in my existing code my jquery code needed tap added

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

I am adding a cross-reference back to the Apple Docs for those interested. See Apple Docs:Making Events Clickable

(I'm not sure exactly when my hybrid app stopped processing clicks but I seem to remember they worked iOS 7 and earlier.)

User · Answer

I usually use    bind  click touchstart   function           instead of    click function           That way you are binding the the correct event  It s also quicker  the touch responds much faster than click for some reason

User · Answer

I had a span that would create a popup  If I used  click touchstart  it would trigger parts of the popup during the touchend  I fixed this by making the span  click touchend

User · Answer

Probably rather than defining both the events click and touch you could define a an handler which will look if the device will work with click or touch   var handleClick   ontouchstart  in document documentElement    touchstart    click     document  on handleClick   button  function    alert  Click is now working with touch and click both

User · Answer

I found that when I made my binding more specific  it began to work on iOS  I had     document  on  click tap    span clickable   function e             When I changed it to      div content   on  click tap    span clickable   function e             iOS began responding

User · Answer

Use bind function instead  Make it more friendly   Example   var clickHandler    click    if  ontouchstart  in document documentElement       clickHandler    touchstart          button   bind clickHandler function        alert  Visible on touch and non-touch enabled devices

User · Answer

None of the upvoted solutions worked for me  Here s what eventually worked   I moved the code which was in   document  ready out  if it wasn t required in document ready  If it s mandatory to have it in document ready  then you move that critical code to jQuery window  load

User · Answer

UPDATE  I switched  bind to  on because it s now the preferred way says jQuery      As of jQuery 1 7  the  on   method is the preferred method for attaching event handlers to a document  jquery com   EXAMPLE        button   on  click touchstart   function            Below is the ultimate version of the click and touchstart event because it still fires even with new DOM objects that are added after the DOM has been loaded  Incorporating this ultimate click event solution for any scenario       document  on  click touchstart     button   function

User · Answer

actually   this has turned out to be couple of javascript changes in the code   calling of javascript method with   at the end  placing script tags in body instead of head  and interestingly even change the text displayed  please  click   to something that is not an event  so Please rate etc   turned debugger on safari  it didnot give much information or even errors at times

User · Answer

I know this was asked a long time ago but I found an answer while searching for this exact question   There are two solutions   You can either set an empty onlick attribute on the html element    lt div class  clickElement  onclick    gt  lt  div gt    Or you can add it in css by setting the pointer cursor    clickElement   cursor pointer     The problem is that on ipad  the first click on a non-anchor element registers as a hover  This is not really a bug  because it helps with sites that have hover-menus that haven t been tablet mobile optimised  Setting the cursor or adding an empty onclick attribute tells the browser that the element is indeed a clickable area    via http   www mitch-solutions com blog 17-ipad-jquery-live-click-events-not-working

User · Answer

We have a similar problem  the click event on a button doesn t work  as long as the user has not scrolled the page  The bug appears only on iOS   We solved it by scrolling the page a little bit       modal-window   animate  scrollTop     next-page-button-anchor   offset   top   500      It doesn t answer the ultimate cause  though  Maybe some kind of bug in Safari mobile

[jquery] Jquery click not working with ipad

Examples related to jquery

Examples related to ipad

Examples related to safari