一些JQuery Mobile触摸事件未被触发

4
我有以下代码,看起来JQuery正常运行,但是一些JQuery Mobile事件根本没有触发:
<!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>

我正在Android上的Chrome浏览器上尝试这个功能。在以上事件中,这些不起作用:taptapholdswipe。我已经三次检查了文件URL。

JQuery的版本是:JQuery: compressed, production 3.1.1,以及最新的JQuery Mobile:1.4.5,使用所有选项的自定义版本,被压缩过。

让人恼火地是,当我将链接和脚本标签替换为早期版本(随机版本),由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>

当我使用最新的 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的错误?


1
它不支持jQuery v3。请使用旧版本的jQuery。此外,我不建议使用自定义版本的jQM;创建您自己的触摸事件。 - Omar
1个回答

3
扩展Omar上面的评论...
目前,jQuery Mobile与最新版本的jQuery不兼容。如果您查看jquerymobile主页,您会在下载按钮下方(右上角)看到可以使用哪些jQuery版本。当前对于jQM v.1.4.5,您需要使用如下版本:

jQuery 1.8 - 1.11 / 2.1


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接