Menu
I tested with jquery mobile 'tap' event and found it fired two times, everytime it is triggered. Code as below for a html page:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
<style>
#box{
background-color:red;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="box">
tapped me
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('tap',function(event) {
alert('why');
});
});
</script>
</body>
</html>
More irony is when I test this over jsfiddle, it only fired the event for one time.
Here's the link. http://jsfiddle.net/mochatony/tzQ6D/6/
After further testing I found out the bug has gone away with placing the javascript at header section.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js">
</script>
<style type="text/css">
#box{ background-color:red; width:200px; height:200px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#box').bind('tap', function(event) {
alert('halo');
});
});
</script>
</head>
<body>
<div id="box">
tapped me
</div>
</body>
</html>
I couldn't explained why the placement at the body and header section make this different.
594
I forget where I saw this, but the issue is that jQuery Mobile is binding to both touch and mouse events in order to simulate "tap," and in some circumstances Android will fire both.
The trick that has worked for me is to call preventDefault on the event in your event handler. That will keep the duplicate event from firing.
As far as why this is the case only sometimes, I know that mobile browsers will try to only fire the mouse version of the event if someone isn't listening to the touch version. There may be an issue with detection or jQuery's delegation that is confusing that heuristic.
95
You are experiencing the ghost click issue... It's a known "bug" and hard to resolve.
More infos there :
http://forum.jquery.com/topic/tap-fires-twice-with-live-tap https://developers.google.com/mobile/articles/fast_buttons http://philosopherdeveloper.wordpress.com/2011/11/01/ghost-clicks-in-jquery-mobile/
In the first link you will find a hack that does the trick. As far as I know, there is no easy solution :(
BTW: Even if it won't solve your problem, @Sagiv is right. JQuery mobile often use ajax for changing page and so does not trigger a document.ready event.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
