CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Jayy
Jayy

Reputation: 14728

Some JQuery Mobile touch events not firing

I have the following code, and it seems clear that JQuery is working, but some JQuery Mobile events are not firing at all:

<!DOCTYPE html>
<html>
    <head>
        <title>JQuery Mobile Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile.custom.complete.min.js"></script>
        <link rel="stylesheet" href="css/jquery.mobile.custom.complete.theme.min.css"/>
        <link rel="stylesheet" href="css/jquery.mobile.custom.complete.structure.min.css"/>
        <script>
            $(function(){
                $(document).on("touchstart", function(e){
                    $('#touchstart').html("touchstart");
                });
                $(document).on("touchend", function(e){
                    $('#touchend').html("touchend");
                });
                $(document).on("touchmove", function(e){
                    $('#touchmove').html("touchmove");
                });
                $(document).on("touchcancel", function(e){
                    $('#touchcancel').html("touchcancel");
                });
                $(document).on("tap", function(e){
                    $('#tap').html("tap");
                });
                $(document).on("taphold", function(e){
                    $('#taphold').html("taphold");
                });
                $(document).on("swipe", function(e){
                    $('#swipe').html("swipe");
                });
            });
        </script>
        <style>
        </style>
    </head>
    <body>
        <div id="touchstart">-</div>
        <div id="touchend">-</div>
        <div id="touchmove">-</div>
        <div id="touchcancel">-</div>
        <div id="tap">-</div>
        <div id="taphold">-</div>
        <div id="swipe">-</div>
    </body>
</html>

I'm trying it out on Chrome on an Android. Of the above events, these don't work: tap, taphold and swipe. I have triple checked the file URLs.

The versions of JQuery above: JQuery: compressed, production 3.1.1, and the latest JQuery Mobile: 1.4.5, custom with all options, minified.

Annoyingly it works as expected when I replace the link and script tags with a (random) earlier version, hosted by JQuery:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

And it doesn't work when I use the latest JQuery-hosted versions:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

But I need to host the files myself and I would like to have the latest versions. What am I doing wrong? Are there differences in the API? Or is it a JQuery bug?

Upvotes: 4

Views: 1501

Answers (1)

Lesley
Lesley

Reputation: 1395

To expand on Omar's comment above... jQuery Mobile isn't compatible right now with the latest version of jQuery. If you look at the jquerymobile homepage, you will see under the download buttons (top-right) what versions of jQuery you can use. Currently for jQM v.1.4.5 you need:

jQuery 1.8 - 1.11 / 2.1

Upvotes: 3

Related Questions