jQuery Mobile 滑动不起作用答案

【问题标题】：jQuery Mobile swipe not workingjQuery Mobile 滑动不起作用
【发布时间】：2013-02-18 09:31:56
【问题描述】：

我正在为一个项目创建自己的图片库。为此，我需要滑动事件。所以在 jsfiddle 上找到了下面的代码。插入所有必要的文件。它显示了列表和所有..但是滑动仍然不起作用.?我在正确的地方编写 jquery 代码吗？还是有什么不对？这是我的代码：

    <html>
        <head>
        <meta charset="utf-8" />
        <title>Home</title>
        <!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
        <meta name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1" />

        <link rel="stylesheet" type="text/css" href="Css/style.css" />
        <link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
        <link rel="stylesheet" type="text/css" href="Css/jquery.mobile.theme-1.2.0.css" />
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

        <script type="text/javascript" src="Javascript/jquery1.js"></script>
        <script type="text/javascript" src="Javascript/jquery2.js"></script>
        <script type="text/javascript" src="css/jq1.6.2.js"></script>

        <script type="text/javascript">
        $("#listitem").swiperight(function() {
            $.mobile.changePage("#page1");
        });
        </script>  

        </head>
        <body>

            <div data-role="page" id="home"> 
            <div data-role="content">

                    <ul data-role="listview" data-inset="true">
                        <li id="listitem"> Swipe Right to view Page 1</a></li>
                    </ul>

            </div>
        </div>

        <div data-role="page" id="page1"> 
            <div data-role="content">

                <ul data-role="listview" data-inset="true" data-theme="c">
                    <li id="listitem">Navigation</li> 

                </ul>

                <p>
                     Page 1
                </p>
            </div>
        </div>

        </body>

【问题讨论】：

什么小提琴？您是否真的将文件添加到您的服务器？如果您在普通计算机上查看控制台中的任何错误
即使我应用了接受的解决方案，此代码甚至对我都不起作用

标签： jquery jquery-mobile

【解决方案1】：

尝试使用pageinit jQuery mobile 处理程序：

$(document).on('pageinit', function(event){
   $("#listitem").swiperight(function() {
        $.mobile.changePage("#page1");
    });
});

Docs for pageinit@jquery mobile。

来自文档：

Take a look at Configuring Defaults

因为 jquery-mobile 事件会立即触发，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。按以下顺序链接到您的 JavaScript 文件：
<script src="jquery.js"></script>  
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

【讨论】：

我不喜欢您将 pageinit 与 mobileinit 混淆的事实。即使您个人不会混淆这两者，您的答案也是关于 pageinit，然后您引用了一些关于 mobileinit 的内容。对我投反对票。
先生，您让我省了几个小时的头痛

【解决方案2】：

这也让我发疯了。我不必像上一篇文章中建议的那样使用 .on('pageinit') 。原来我的语法在我的 JQuery 中是正确的，但 CASE SENSITIVTY 是我的问题。 'swiperight' 不起作用，但 'swipeRight' 起作用了！下面的代码对我有用，还解决了在移动浏览器中滑动阻止文档上下滚动的问题。确保单独指定 swipeRight 和 swipeLeft 方法，而不是一个通用的“swipe”类，你就可以开始了！ * 注意底部的 Exclude Elements 行，注意我从列表中删除了“span”，以便在常用的 span 元素上滑动。

$(function() {  

      $('.yourclassname').swipe( 
      {
        swipeLeft:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe left actions in here, animations, fading, etc..
            alert(direction);
        },
        swipeRight:function(event, direction, distance, duration, fingerCount) 
        {
            // do your swipe right actions in here, animations, fading, etc..
            alert(direction);
        },
        threshold:4,
        // set your swipe threshold above

        excludedElements:"button, input, select, textarea"
        // notice span isn't in the above list
      });
});

【讨论】：

问题是关于jQuery mobile，而不是touchSwipe library -1