CODEWITHSUNDEEP
jqueryeventsjquery-mobile
mpj
mpj

Reputation: 5367

jQuery mobile duplicated events

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?

Upvotes: 2

Views: 1442

Answers (1)

Ruslan
Ruslan

Reputation: 10147

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.

Upvotes: 5

Related Questions