CODEWITHSUNDEEP
jqueryjquery-mobilemobile
Gary O. Stenstrom
Gary O. Stenstrom

Reputation: 2294

jQuery Mobile Swipe events are not firing ...

I am not looking to do anything special here ... I just want to start by capturing some swipe events. All the documentation and wiki and blog posts and video tutorials indicate it's a pretty straight-forward task ... so why am I having such a hard time with it!!?

I am referencing the proper files ... other stuff works so I know that they are not broken references ... 

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

The HTML is loaded EXTERNALLY but is fairly straight forward ... It IS an ASP.NET WebForms page but there is absolutely NO server-side activity at all. It just renders up the HTML and is being displayed properly in the page. Most of the lines are just jQuery attributes on a few "pages".

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

And the not-so complicated code that is supposed to fire when one swipes his finger/mouse across the screen ... 

    $(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");
        });
    });

When the html is loaded the "page created" message is properly emitted to the console window so I know the function is firing and firing at the right time.

I have bound the swipe events to the bottom-most element to avoid any issues with other elements canceling the bubbling of the event (I really want it on the document ... but ... debugging) . I added a click event to verify that the selector is correct and that events ARE making it through. They are and the click message is being emitted properly as well.

It's just the "swipe" events ... they do nothing. They just sit there staring back, taunting me ... behaving as if I haven't tried "live", "bind", "on" and a million other ways of binding them to the element, as if the hundreds of selectors I attempted never happened.

I can't take it anymore!! These swipe events MUST be dealt with!! They can NOT win!

please and thank you :|

Upvotes: 0

Views: 491

Answers (1)

Gary O. Stenstrom
Gary O. Stenstrom

Reputation: 2294

The resolution is as humiliating as the question ... my machine rebooted last night (apparently a routine, yet unscheduled occurrence) and now it works!!

Whisky Tango Foxtrot?

Anyway ... thank you to anyone who who took the time to look this over.

Upvotes: 1

Related Questions