Some jQuery Mobile touch events do not fire

I have the following code, and it seems obvious that jQuery works, but some JQuery Mobile events do not fire 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 am trying to use Chrome on Android. They do not work out of the above events: tap, taphold, and swipe. I checked triple file urls.

JQuery versions above: JQuery: compressed, release 3.1.1 and the latest jQuery Mobile: 1.4.5, customizable with all parameters, reduced.

Annoying works as expected when I replace the link and script tags with an earlier (random) version hosted in 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 does not work when I use the latest versions hosted in jQuery:

<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>

, . ? API? JQuery?

+4
1

Omar ... jQuery Mobile jQuery. jquerymobile homepage, ( ), jQuery . jQM v.1.4.5 :

jQuery 1.8 - 1.11/2.1

+3

Source: https://habr.com/ru/post/1662008/


All Articles