iPad Javascript/jQuery touchstart issue

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

So I have:

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",fun开发者_开发百科ction(){
$("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?

As I know there is no need to implement touch events to achieve what you want. You can use common click event. It will be emulated by the browser of the device.

Sounds like a ghost click, have a read here http://code.google.com/mobile/articles/fast_buttons.html

Try this js fiddle code.It works in all major browsers and all touch devices at time..

http://jsfiddle.net/vecny/

Just use the change event instead of the touchstart. It should be working in a desktop browser and a touch browser too.