This is a newbie question that is driving me crazy. According to jQuery mobile site, I have included jQuery and jQuery mobile into the head of the HTML.
Then, when I am assigning listeneres for any event, it’s running twice. Example:
<!doctype html>
<html>
<head>
<meta http-equiv="imagetoolbar" content="false" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
.slide {width:400px; height:400px; padding:40px; border:1px solid black;}
</style>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div class="slide">
<h1>1</h1>
</div>
<script type="text/javascript">
$(function() {
$('.slide').tap(function() {
alert('tapped!');
});
});
</script>
</body>
</html>
Then, if I tap (or click in a desktop browser) that slide div, two alerts are shown. If I comment the line including jQuery mobile, it only runs once.
What’s the line to follow here?
If you move your script into
<head>tag, it will only fire once. I think it’s something to do with crazy jQuery Mobile page caching.