I have a jQuery code which works perfect on desktop browsers;

$("span#checkbox_err").mouseout(function () {
                        $("span#checkbox_err").fadeOut("slow");
                    });

But the same does not trigger on the iPad (as a result the checkbox_err is displayed on screen, but never hides)

How do I trigger the mouseout event on the iPad ?

Also I'll want to avoid using any additional library just to fix this small issue..

I HAVE A FOLLOW UP QUESTION

I am testing a page on iPad and am facing some issues implementing an equivalent of mouseout behavior..

So the issue is very simple to understand; 1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg 2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg

Below is the code I have written;

$(document).bind("touchstart",function(e){
         if(e.target.id != "checkbox_err")
        $("span#checkbox_err").fadeOut("slow");
     });
}


$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");

});

Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)

How do I fix this issue?

I have a jQuery code which works perfect on desktop browsers;

$("span#checkbox_err").mouseout(function () {
                        $("span#checkbox_err").fadeOut("slow");
                    });

But the same does not trigger on the iPad (as a result the checkbox_err is displayed on screen, but never hides)

How do I trigger the mouseout event on the iPad ?

Also I'll want to avoid using any additional library just to fix this small issue..

I HAVE A FOLLOW UP QUESTION

I am testing a page on iPad and am facing some issues implementing an equivalent of mouseout behavior..

So the issue is very simple to understand; 1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg 2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg

Below is the code I have written;

$(document).bind("touchstart",function(e){
         if(e.target.id != "checkbox_err")
        $("span#checkbox_err").fadeOut("slow");
     });
}


$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");

});

Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)

How do I fix this issue?

• javascript
• jquery
• iphone
• ipad
• safari

4 Answers 4

You could try .blur() instead of .mouseout()

Maybe because of bubbling? It makes sense to me, the event will reach the underlying layer which is not the target. So you have to stop eventPropagation:

$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");
event.stopPropagation.

});

Hope it helps ya. Did you happen to find an alternative for mouseout? - which brought me here.

this example will surely help you ! http://jsfiddle/PzTcS/12/, It works well on iPad.

You could try with GestureEnd() event in ipad