CODEWITHSUNDEEP
javascriptjqueryiphoneipadsafari
Diana
Diana

Reputation: 435

jQuery mouseout on iPad

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?

Upvotes: 7

Views: 6090

Answers (4)

user1613294
user1613294

Reputation:

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

Upvotes: 1

EricG
EricG

Reputation: 3849

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.

Upvotes: 1

Gourav khanna
Gourav khanna

Reputation: 1391

You could try with GestureEnd() event in ipad

Upvotes: -1

Andy
Andy

Reputation: 30135

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

Upvotes: 2

Related Questions