jQuery Mobile Swipe事件没有触发......

时间:2016-05-11 20:36:43

标签: jquery jquery-mobile mobile

我不打算在这里做任何特别的事情......我只想从捕获一些滑动事件开始。所有文档和维基和博客文章以及视频教程都表明这是一项非常直接的任务......那么为什么我会有这么难的时间!!?

我正在引用正确的文件......其他的东西都有效,所以我知道它们没有被破坏的引用......

<link rel="stylesheet" href="/libs/jQuery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<script  type="text/javascript" src="/libs/jQuery/jquery-1.11.3.js"></script>
<script  type="text/javascript" src="/libs/jQuery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

HTML是外部加载的,但相当简单......它是一个ASP.NET WebForms页面,但绝对没有任何服务器端活动。它只是呈现HTML并在页面中正确显示。大多数行只是几个“页面”上的jQuery属性。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <!-- BEGIN READING DATE -->
    <div data-role="page" id="acctReadingDate" class="booth-acct-form" 
        data-title="Reading Date" 
        data-dom-cache="true" 
        data-theme="a" 
        data-next="#acctPrintCount"
        data-url="acctReadingDate">
        <div role="main" class="ui-content">
            Reading Date<br />
        </div>
    </div>
    <!-- END READING DATE -->

    <!-- BEGIN READING DATE -->
    <div data-role="page" id="acctPrintCount" class="booth-acct-form" 
        data-title="Print Count" 
        data-dom-cache="true" 
        data-theme="a" 
        data-prev="acctReadingDate" 
        data-next="#acctCash" 
        data-url="acctPrintCount">
        <div role="main" class="ui-content">
            Print Count
        </div>
    </div>
    <!-- END READING DATE -->

    <!-- BEGIN READING DATE -->
    <div data-role="page" id="acctCash" class="booth-acct-form" 
        data-title="Cash" 
        data-dom-cache="true" 
        data-theme="a" 
        data-prev="#acctPrintCount" 
        data-next="#acctFree" 
        data-url="acctCash">
        <div role="main" class="ui-content">
            Cash
        </div>
    </div>
    <!-- END READING DATE -->

    <!-- BEGIN READING DATE -->
    <div data-role="page" id="acctFree" class="booth-acct-form" 
        data-title="Free" 
        data-dom-cache="true" 
        data-theme="a" 
        data-prev="#acctCash" 
        data-next="#acctCredit"
        data-url="acctFree">
        <div role="main" class="ui-content">
            Free
        </div>
    </div>
    <!-- END READING DATE -->

    <!-- BEGIN READING DATE -->
    <div data-role="page" id="acctCredit" class="booth-acct-form" 
        data-title="Credit" 
        data-dom-cache="true" 
        data-theme="a" 
        data-prev="#acctFree" 
        data-next="#acctShotCount"
        data-url="acctCredit">
        <div role="main" class="ui-content">
            Credit
        </div>
    </div>
    <!-- END READING DATE -->

    <!-- BEGIN SHOT COUNT -->
    <div data-role="page" id="acctShotCount" class="booth-acct-form" 
        data-title="Shot Count" 
        data-dom-cache="true" 
        data-theme="a" 
        data-prev="#acctCredit" 
        data-next="nextForm" 
        data-url="acctShotCount">
        <div role="main" class="ui-content">
            ShotCount
        </div>
    </div>
    <!-- END SHOT COUNT -->

    </div>
    </form>
</body>
</html>

当用手指/鼠标在屏幕上滑动时,应该触发的不那么复杂的代码......

    $(document).one("pagecreate", ".booth-acct-form", function () {

        console.log("page created");

        $(".ui-content").on("click", function (evt) {
            console.log("clicked");
        });

        $(".ui-content").on("swipe", function (evt) {
            console.log("swiped");
        });

        $(".ui-content").on("swipeleft", function (evt) {
            console.log("Swiping left");
        });

        $(".ui-content").on("swiperight", function (evt) {
            console.log("Swiping right");
        });
    });

当加载html时,“页面创建”消息被正确地发送到控制台窗口,因此我知道该函数在正确的时间触发和触发。

我已将滑动事件绑定到最底层的元素,以避免其他元素的任何问题取消事件的冒泡(我真的希望它在文档上......但是......调试)。我添加了一个click事件来验证选择器是否正确以及事件正在通过。他们是,并且点击消息也正确发出。

这只是“轻扫”事件......他们什么都不做。他们只是坐在那里盯着我,嘲笑我......表现得好像我没有尝试过“活”,“绑定”,“开启”以及其他一百万种方法将它们绑定到元素上,好像数百个选择器我尝试从未发生过。

我不能再忍受了!!这些滑动事件必须处理!!他们无法获胜!

请和谢谢:|

1 个答案:

答案 0 :(得分:0)

决议和问题一样令人羞辱......昨晚我的机器重新启动了(显然是例行的,但是没有计划的事情发生)现在它有效!!

Whiskey Tango Foxtrot?

无论如何......感谢任何花时间看这个的人。