Question

Imagine there are 5 sublinks (having class searchBySub) and 5 corresponding buttons on a page..

Now these 5 sublinks have following clas definitions

#leftNav .searchBySub {...}
#leftNav  a.searchBySub:hover {...}
#leftNav  a.searchBySubClick {...}

Now I am testing this page on the iPad.
Any of the 5 sublinks can be clicked which changes it CSS (offcourse shows the clicked link as selected color)

Also if I click on any of the corresponding button, it should show me the corresponding link with selected color…I am doing this via a click event on this button click;

$(".button1").live("click",function(){
            $("link1").click(); //This is not exact code (but written dynamically...anyways it simulates the first link click)
        });

Just one more thing, I am unable to show the exact code as the content gets refreshed via an AJAX call on each link/button click, which is why I have used the jQuery.live() for the bindings…

Now my issue is , on the iPAD, when I simulate the click via the button click, on let’s say Button2, while link1 is selected currently, it will correctly show link2 as selected color….
But for some reasons, it is showing link1 with hover state during this simulated click…I have no idea whatsoever why this is happening..

Please help me. Thank you.

Answer 1

You may want to capture and take action on the touchstart event. For mobile devices without mice, you get a series of events when someone taps on the screen:

• touchstart
• touchend
• mousedown
• mouseup
• click

The mouse* events don’t happen until after touchend, which may not be the behavior you want. Check out Apple’s mobile Safari event docs for more info: