javascript - jQuery と Phonegap でのスワイプが予期せず動作する

Question

この回答で指定されたコードを使用して、Phonegap アプリケーションでいくつかのページをスワイプしています。

しかし、ライブ機能は廃止されたようで、さらにリロードしようとするとページの下に「0」が表示されます。さらに試行すると、ゼロの文字列が作成され、それぞれの数がそのページのリロード数を示します。簡単に言うと、スワイプは機能しますが、スワイプされたページの各ロードで 0 が表示されます。

これに変更しようとしましたが、うまくいかないようです (Phonegap 2.1.0、jQuery 1.8.2、および jQuery Mobile 1.1.1 を使用しています)。

<script type="text/javascript">
    $('div.ui-page').on("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $('div.ui-page').on("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            }, true, true);
        }
    });
</script>

編集：これを試してみましたが、最初の問題が発生したのと同じです：

<script type="text/javascript">
    $(document).delegate('div.ui-page', 'swipeleft', function () {
        var nextpage = $(this).nexy('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
    $(document).delegate('div.ui-page', 'swiperight', function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: false
            }, true, true);
        }
    });
</script>

score 1 · Accepted Answer

そのバージョンのonはbindと同等です。ライブを置き換えるには、

$(document).on("swipeleft", "div.ui-page", function...

イベントをさらにデバッグするには、$（this）が何を参照しているかを確認します。これは、想定しているページではない可能性があり、次/前の要素がない可能性があります。

アプリの設定方法によってある程度異なりますが、通常、特定の順序で存在するページdivに依存することはできません。

また、changePageの呼び出しは、現在のドキュメント（ http://jquerymobile.com/test/docs/api/methods.html ）と一致していないようです-最後の2つの真実は何ですか？

score 1 · Accepted Answer

自分の質問に答えることが礼儀正しいかどうかはわかりませんが、解決策を見つけたので、表示されると便利だと思います。

jQuery 1.8.2 と jQuery mobile 1.2.0 に更新すると、すべてが機能しました。動作する例は次のとおりです。

<!DOCTYPE HTML>
<html>
<head>
    <title>EventApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" />

    <script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $('div.ui-page').live("swipeleft", function () {
        var nextpage = $(this).next('div[data-role="page"]');
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {
                transition: "slide",
                reverse: false
            });
        }
    });
    $('div.ui-page').live("swiperight", function () {
        var prevpage = $(this).prev('div[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {
                transition: "slide",
                reverse: true
            });
        }
    });
    });
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page one</h2>
    </div>
    <div data-role="content">
        You are in page one.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page two</h2>
    </div>
    <div data-role="content">
        You are in page two.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">Page three</h2>
    </div>
    <div data-role="content">
        You are in page three.
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
<div data-role="page">
    <div data-role="header">
        <h2 class="ui-title">The map</h2>
    </div>
    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
    <div data-role="footer" data-id="foo1" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="b.html" data-icon="info">Info</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div>
</body>

そして、JsFiddleが必要な場合はここにあります

javascript - jQuery と Phonegap でのスワイプが予期せず動作する

2 に答える 2

Related

Reference