jQuery issue while adding CSS class

I have 5 sublinks which have 2 states; hover (CSS className: subLinks) and active (CSS ClassName: subLinksClicked)

I call the following function on page ready;

$(document).ready(function(){
if (navigator.userAgent.match(/iPad/i) != null)
{
    $("#leftNav  a.subLinks").live("hover",function(){
            $("#leftNav  a.subLinks").removeClass("subLinksClicked");
            $(this).addClass("subLi开发者_StackOverflownksClick");
            clickEvent($(this));
    });
}
}

Now there is an issue on the iPad...Basically on click of each of the sub links there is an AJAX call, which kind of removes all of these links and then rewrites as part of response..And for some reason, after that, if I click on another sublink, the active class does not get removed from the previous link..

I expect this to happen, as I have used jQuery.live() and not just jQuery.bind()

Please help me. Thank you.

---

There is no hover event in iPad.

Remember that you're dealing with a touch screen device - there is no mouse, hence mouse movement events are not supported. Instead, google around for "ipad touch events".

With that said, you CAN listen for some touch events that are equivalent to simple mouse events such as mousedown, mousemove and mouseup. Check out the jQuery Touch Punch plugin, which maps touch events to some of these basic mouse events.

---

Try appending your live function with touchstart event, like this:

$("#leftNav  a.subLinks").live("hover touchstart",function(){ ... ]);