<!DOCTYPE html>
<html>
<head>
<title>Tap and Swipes</title>
<link rel="stylesheet" href="../../jquerymobile/jquery.mobile-1.0a3.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="../../jquerymobile/jquery.mobile-1.0a3.js"></script>
<script>
$(document).ready(function() {
$("#intro").live("tap", function() {
$("#testArea").html("You did a tap event.");
});
$("#intro").live("taphold", function(e) {
$("#testArea").html("You did a tap hold event.");
});
});
</script>
</head>
<body>
<div data-role="page" id="intro">
<h1>Taps</h1>
</div>
<div data-role="content">
Try a tap and a tap hold...
</p>
</div>
Copyright 2011.
</div>
</div>
</body>
</html>
This worked fine. So I then added a button so I could test a swipe event over it. Unfortunately, the second I added the button (even with the event handler comment out), my tap events completely stopped working.
<!DOCTYPE html>
<html>
<head>
<title>Tap and Swipes</title>
<link rel="stylesheet" href="../../jquerymobile/jquery.mobile-1.0a3.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="../../jquerymobile/jquery.mobile-1.0a3.js"></script>
<script>
$(document).ready(function() {
$("#intro").live("tap", function() {
$("#testArea").html("You did a tap event.");
});
$("#intro").live("taphold", function(e) {
$("#testArea").html("You did a tap hold event.");
});
/*
$("#mybutton").live("swipe", function() {
$(this).val("You swiped me. Swiper no swiping!");
});
*/
});
</script>
</head>
<body>
<div data-role="page" id="intro">
<h1>Taps</h1>
</div>
<div data-role="content">
Try a tap and a tap hold...
</p>
<input id="mybutton" type="button" data-theme="e" value="Swipe Me!">
</p>
</div>
Copyright 2011.
</div>
</div>
</body>
</html>