jQuery issue while adding CSS class

Question

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("subLinksClick");
            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.

Can you post the HTML before and after the AJAX post? – Chris Snowden Jul 26 '11 at 13:31 — Chris Snowden, Jul 26 '11 at 13:31
can you make a [jsfiddle](http://jsfiddle.net/) of it? – Greg Guida Jul 26 '11 at 13:32 — Greg Guida, Jul 26 '11 at 13:32
Perhaps try the `touchstart` and `touchend` events? – Michael Mior Jul 26 '11 at 13:35 — Michael Mior, Jul 26 '11 at 13:35

Kon · Accepted Answer · 2011-07-26T15:28:28.710

2

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.

edited Jul 26 '11 at 15:28

answered Jul 26 '11 at 13:31

Kon

27,113
11
60
86

Ok..I changed that to $("#leftNav a.subLinks").live("mouseover",function(){ ...} still facing the issue ...though inconsistently – copenndthagen Jul 26 '11 at 13:36
For some reasons, I am still unable to fix the issue ...tried live with touchstart, mousehover, hover... Just wondering if I need to unbind as well and if that is legal...like $(".content_media").unbind("touchstart").live("touchstart",function(){ ...}) – copenndthagen Jul 27 '11 at 09:38
First of all, I don't think you're getting point about hover - there is no hover event of any sort when you're dealing with a touch screen device like ipad. Forget mousehover and hover. Secondly, try this out to see how to use touchmove: http://stackoverflow.com/questions/4755505/how-to-recogized-touch-event-using-jquery-for-ipad-safari-browser-is-it-possible – Kon Jul 27 '11 at 11:50

score 0 · Answer 2 · answered Jul 26 '11 at 13:36

0

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

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

answered Jul 26 '11 at 13:36

Vilius Paulauskas

3,121
3
24
24

jQuery issue while adding CSS class

2 Answers2